React 컴포넌트 성능 최적화
React와 Next.js는 불필요한 리렌더링과 번들 크기를 줄여 사용자 경험을 개선하는 여러 최적화 기법을 제공한다. 핵심은 React.memo, useMemo, useCallback을 통한 메모이제이션과 Dynamic Import를 통한 코드 분할, 그리고 데이터 fetching 전략의 선택이다.
React.memo는 컴포넌트의 props가 변경되지 않으면 이전 렌더링 결과를 재사용해 불필요한 리렌더링을 막는다. useMemo는 계산 비용이 큰 연산의 결과값을, useCallback은 함수 자체를 메모이제이션해 의존성 배열이 변경될 때만 재계산·재생성한다. 두 hook 모두 의존성 배열 관리가 핵심이며, 배열을 제대로 설정하지 않으면 값이나 함수가 원하는 시점에 갱신되지 않는 문제가 생긴다.
Dynamic Import는 페이지나 컴포넌트를 필요한 시점에 동적으로 로드해 초기 번들 크기를 줄이는 Next.js 기능이다. 단순히 컴포넌트를 나중에 불러오는 `lazy`와 달리, 특정 이벤트 처리나 조건부 렌더링과 결합해야 실제로 로딩 시점을 지연시키는 효과를 낼 수 있다.
데이터 fetching 최적화에서는 `getStaticProps`, `getServerSideProps` 같은 SSR 기법을 무조건 적용하기보다, 화면에 필요한 데이터가 실시간으로 갱신되어야 하는지 여부에 따라 CSR 방식(예: React Query)과 선택적으로 조합해야 한다.
메모이제이션 기법은 만능이 아니다. 추가적인 계산·메모리 비용이 들기 때문에 불필요한 곳에 적용하면 오히려 성능이 저하되고 코드 복잡도만 높아져 버그 위험이 커진다. 작은 규모의 단순한 컴포넌트는 React 자체의 효율적인 렌더링으로 충분하므로, 실제로 성능 이슈가 확인되거나 계산 비용이 높은 작업이 있을 때만 최적화를 적용하고 테스트·측정으로 효과를 검증해야 한다.
핵심 내용
- React.memo: props가 바뀌지 않으면 이전 렌더링 결과를 재사용
- useMemo: 계산 비용이 큰 값을 메모이제이션, 의존성 배열이 바뀔 때만 재계산
- useCallback: 콜백 함수를 메모이제이션, 자식 컴포넌트의 불필요한 리렌더링 방지에 유용
- Dynamic Import: 컴포넌트를 필요한 시점에 로드해 초기 번들 크기 감소, `lazy`와는 다른 개념
- 데이터 fetching은 실시간성 여부에 따라 SSR(`getStaticProps`/`getServerSideProps`)과 CSR을 선택적으로 조합
- 메모이제이션은 실제 성능 이슈가 확인된 경우에만 적용, 남용하면 오히려 역효과
관련 개념
- React 컴포넌트 패턴 — Container/Presentational, Compound, HOC 등 구조적 패턴
- Next.js 레이아웃과 템플릿 — Next.js의 렌더링·라우팅 구조
- 브라우저 렌더링 파이프라인 — 리렌더링 비용이 발생하는 근본 원리
- Resize Observer API — 리사이즈 감지 시 불필요한 리렌더를 줄이는 Web API 차원의 성능 최적화
출처
- 컴포넌트 성능 최적화 — 2023-07-17, taeyong.kim