리렌더링, 언제 줄여야 하나요?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
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의 자연스러운 동작으로, 실제 성능 병목이 확인될 때만 최적화를 고려하는 것이 중요하다.