React 리렌더링 최적화: useCallback, useMemo, React.memo, Context 관계 정리
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *React 개발자 (중급 이상), 성능 최적화에 관심 있는 프론트엔드 개발자**
핵심 요약
onHide
함수를useCallback
으로 감싸면 함수 참조를 고정하여 리렌더링을 방지할 수 있다.- Context의
value
객체를useMemo
로 감싸면 객체 참조를 동일하게 유지하여 자식 컴포넌트 리렌더링을 차단할 수 있다. React.memo
는 props의 얕은 비교를 통해 리렌더링을 방지하지만, Context 구독 시 무시된다.
섹션별 세부 요약
- 문제 상황
Modal
컴포넌트의onHide
익명 함수를 Context로 전달했을 때, 자식 컴포넌트가 불필요하게 리렌더링됨.value={{ onHide }}
객체 리터럴은 렌더링마다 새로운 참조값을 생성해 Context 구독자에게 리렌더링을 강제함.Modal.Header
는useContext
로 Context를 구독하고 있기 때문에,value
변경 시 무조건 리렌더링됨.
- 해결 방법: useCallback과 useMemo 활용
onHide
함수를useCallback(() => setModalOpen(true), [])
로 감싸면 참조값이 고정됨.useMemo(() => ({ onHide }), [onHide])
로value
객체를 생성하면,onHide
변경 시만 참조값이 재생성됨.React.memo
를 자식 컴포넌트에 적용하면, props가 동일할 경우 리렌더링을 방지할 수 있음.
- Context와 React.memo의 충돌
useContext
로 Context를 구독하는 컴포넌트는value
변경 시 React.memo를 무시하고 리렌더링됨.Modal.Header
는 Context 구독으로 인해useMemo
/useCallback
적용에도 불구하고 리렌더링됨.Modal.Body
,Modal.Footer
는 Context를 구독하지 않기 때문에React.memo
로 리렌더링을 완전히 차단 가능.
- 최적화 흐름 요약
- Context 값 전달 → useMemo 적용 → useCallback 적용 → React.memo 적용 순서로 최적화를 적용해야 함.
useCallback
과useMemo
는React.memo
가 작동하는 선행 조건으로, 참조값 고정이 필수적임.
결론
- *Context 구독 시 React.memo를 무시하게 되므로, Context 사용 여부에 따라 최적화 전략을 분리해 적용해야 한다.
useCallback
과useMemo
를 통해 참조값을 고정하고,React.memo
로 props 변경에 따른 리렌더링을 차단하는 것이 핵심이다. 성능 최적화는 구조 설계와 필요성 판단을 기반으로 해야 하며, 무작정 최적화 도구를 사용하는 것보다 성능과 유지보수성의 균형**을 고려해야 한다.