React 리렌더링 최적화: 언제 줄여야 할까요?

리렌더링, 언제 줄여야 하나요?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자 (초보자 및 중급자), 성능 최적화에 관심 있는 프론트엔드 개발자

핵심 요약

  • 리렌더링(render)은 컴포넌트 함수 재실행이며, 실제 DOM 변화는 커밋(commit) 단계에서만 발생
  • 불필요한 리렌더링 최적화커밋 비용 절감을 위한 전략으로, 측정 없이 무작정 최적화는 피해야 함
  • React DevTools Profiler를 사용해 렌더링 트리 및 성능 병목 지점 분석이 필수적

섹션별 세부 요약

1. 리렌더링의 의미 및 과정

  • 리렌더링은 상태 변경(setState, useReducer) 시 컴포넌트 함수가 재실행되는 과정
  • 렌더링 단계

- Virtual DOM 생성

- 이전 Virtual DOM과 비교(Diff)

- 실제 DOM 변경 여부 결정(커밋)

  • 커밋은 실제 DOM 업데이트로, 브라우저에서 화면 재그리기(페인트) 발생

2. 리렌더링 vs 커밋의 성능 영향

  • 리렌더링(render)은 가볍지만, 커밋(commit)은 무겁고 성능에 직접적인 영향
  • 불필요한 리렌더링이 많을 경우, 커밋 횟수 증가 → 성능 저하
  • 리렌더링 줄이기커밋 비용 감소의 출발점

3. 리렌더링 최적화가 필요한 상황

  • 관련 없는 컴포넌트까지 리렌더링 (예: context 전파, props 재생성)
  • 사용자 체감 지연 (애니메이션, 레이아웃 재배치 시 끊김)
  • 렌더링 횟수가 지나치게 많음 (복잡한 컴포넌트 트리로 인한 반복적 리렌더링)

4. 리렌더링 최적화 전략

  • React DevTools"Highlight updates" 기능으로 리렌더링 컴포넌트 시각화
  • Profiler 탭에서 Flamegraph로 렌더링 트리 분석

- 렌더링 시간이 긴 컴포넌트 → 계산/로직 최적화

- 렌더링 횟수가 많은 컴포넌트React.memo() 적용

- 불필요한 자식 컴포넌트 리렌더링 → 부모 props 전달 구조 재검토

  • useCallback/useMemo 사용 시, 실제 성능 병목 지점에서만 적용

결론

  • 리렌더링 최적화는 측정 없이 무작정 적용하는 것보다, Profiler로 성능 분석 후 필요한 경우에만 적용해야 한다.
  • React.memo, useCallback 등은 도구이지 필수적이지 않으며, 코드 가독성과 유지보수성을 고려해 사용해야 한다.
  • 리렌더링은 React의 자연스러운 동작으로, 실제 성능 병목이 확인될 때만 최적화를 고려하는 것이 중요하다.