2022년 5월 1일
Next.js 최적화를 위한 React Hooks 사용 패턴 정리
nextjsreacthooksperformanceoptimization
Next.js App Router 기준으로 불필요한 렌더를 줄이고, 무거운 계산과 리스트 렌더를 부드럽게 만드는 Hook 최적화 패턴을 정리한 글입니다.
1무거운 로직을 Server Component로 보내고 클라이언트 영역을 최소화하는 전략을 설명한다
2useMemo와 useCallback을 언제 써야 실제로 도움이 되는지 기준을 제시한다
3UI에 직접 영향을 주지 않는 값은 useRef로 관리해 렌더를 줄이는 패턴을 소개한다
4useEffect를 줄이고 렌더/서버 쪽으로 계산을 옮기는 방법을 다룬다
5useTransition과 useDeferredValue로 검색/필터 UI를 부드럽게 만드는 예제를 제공한다