Feat: stock 관련 API (리스트, 매도/매수, 상세조회) 연동 및 페이지네이션 최적화

[jllee000]

📌 Related Issues

관련된 Issue를 태그해주세요.

• close [Feat] stock 관련 API (리스트, 매도/매수, 상세조회) 연동 및 페이지네이션 최적화 #17

📄 Tasks

1. list 페이지 stock API 연동
2. 페이지네이션 최적화 작업
3. 컴포넌트 형식 수정
4. 매도/매수 API
5. 종목 데이터 호출 최적화

⭐ PR Point

1. 변경 사항

1. 종목 리스트 렌더링 최적화

   • useMemo를 사용하여 검색 필터링 연산 메모이제이션
   • React.memo를 통해 ListStock 컴포넌트 불필요한 리렌더 방지

2. 클라이언트 사이드 페이지네이션 구현

   • page 상태 추가
   • slice 기반 데이터 분리
   • 페이지 이동 UI 구현
   • 검색 UX 개선

3. 검색어 변경 시 페이지를 1로 초기화

   • useEffect 제거 후 input 핸들러 내부에서 직접 상태 제어

2. 문제 -> 해결

[기존 문제점]
검색어 입력 시 매 렌더마다 전체 리스트 filter 연산 수행
부모 컴포넌트 리렌더 시 자식(ListStock) 전부 재렌더링
데이터가 증가할 경우 성능 저하 가능성 존재
검색 후 페이지가 유지되어 빈 화면이 나타나는 UX 문제

[개선 방식]
1️⃣ 필터링 최적화

const filteredStocks = useMemo(() => {
  return stockList.filter(...)
}, [stockList, keyword]);

검색어 또는 데이터 변경 시에만 재계산
불필요한 연산 제거

2️⃣ 페이지네이션 적용

const paginatedStocks = useMemo(() => {
  const start = (page - 1) * PAGE_SIZE;
  return filteredStocks.slice(start, start + PAGE_SIZE);
}, [filteredStocks, page]);

한 번에 렌더되는 컴포넌트 개수 제한
렌더링 비용 감소

3️⃣ React.memo 적용

export default React.memo(ListStock);

props 변경이 없는 경우 자식 컴포넌트 리렌더 방지
리스트 렌더링 비용 절감

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
m-vest	Ready	Preview, Comment	Mar 3, 2026 0:24am