React 리렌더링 최적화: useCallback, useMemo, React.memo, Context 관계

React 리렌더링 최적화: useCallback, useMemo, React.memo, Context 관계 정리

카테고리

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

서브카테고리

웹 개발

대상자

  • *React 개발자 (중급 이상), 성능 최적화에 관심 있는 프론트엔드 개발자**

핵심 요약

  • onHide 함수를 useCallback으로 감싸면 함수 참조를 고정하여 리렌더링을 방지할 수 있다.
  • Context의 value 객체를 useMemo로 감싸면 객체 참조를 동일하게 유지하여 자식 컴포넌트 리렌더링을 차단할 수 있다.
  • React.memoprops의 얕은 비교를 통해 리렌더링을 방지하지만, Context 구독 시 무시된다.

섹션별 세부 요약

  1. 문제 상황
  • Modal 컴포넌트의 onHide 익명 함수를 Context로 전달했을 때, 자식 컴포넌트가 불필요하게 리렌더링됨.
  • value={{ onHide }} 객체 리터럴은 렌더링마다 새로운 참조값을 생성해 Context 구독자에게 리렌더링을 강제함.
  • Modal.HeaderuseContext로 Context를 구독하고 있기 때문에, value 변경 시 무조건 리렌더링됨.
  1. 해결 방법: useCallback과 useMemo 활용
  • onHide 함수를 useCallback(() => setModalOpen(true), [])로 감싸면 참조값이 고정됨.
  • useMemo(() => ({ onHide }), [onHide])value 객체를 생성하면, onHide 변경 시만 참조값이 재생성됨.
  • React.memo를 자식 컴포넌트에 적용하면, props가 동일할 경우 리렌더링을 방지할 수 있음.
  1. Context와 React.memo의 충돌
  • useContext로 Context를 구독하는 컴포넌트는 value 변경 시 React.memo를 무시하고 리렌더링됨.
  • Modal.Header는 Context 구독으로 인해 useMemo/useCallback 적용에도 불구하고 리렌더링됨.
  • Modal.Body, Modal.Footer는 Context를 구독하지 않기 때문에 React.memo로 리렌더링을 완전히 차단 가능.
  1. 최적화 흐름 요약
  • Context 값 전달 → useMemo 적용 → useCallback 적용 → React.memo 적용 순서로 최적화를 적용해야 함.
  • useCallbackuseMemoReact.memo가 작동하는 선행 조건으로, 참조값 고정이 필수적임.

결론

  • *Context 구독 시 React.memo를 무시하게 되므로, Context 사용 여부에 따라 최적화 전략을 분리해 적용해야 한다. useCallbackuseMemo를 통해 참조값을 고정하고, React.memo로 props 변경에 따른 리렌더링을 차단하는 것이 핵심이다. 성능 최적화는 구조 설계필요성 판단을 기반으로 해야 하며, 무작정 최적화 도구를 사용하는 것보다 성능과 유지보수성의 균형**을 고려해야 한다.