React 리렌더링 최적화: useCallback, useMemo, React.memo의 올바른 활용법과 Context의 함정

React 리렌더링 최적화: useCallback, useMemo, React.memo의 올바른 활용법과 Context의 함정

핵심 기술

본 콘텐츠는 React 컴포넌트의 불필요한 리렌더링을 방지하기 위한 useCallback, useMemo, React.memo의 효과적인 사용법을 실제 문제 상황과 해결 과정을 통해 설명합니다. 특히 useContext와 React.memo의 상호작용에 대한 심층적인 분석과 그로 인한 리렌더링 문제를 다룹니다.

기술적 세부사항

• 문제 상황 분석: onHide와 같은 함수를 Modal 컴포넌트에서 익명 함수로 Context provider의 value로 전달할 때 발생하는 리렌더링 문제점을 제시합니다.
  • 익명 함수는 렌더링마다 새로운 참조를 생성하여 Context value가 변경된 것으로 간주됩니다.
  • 이로 인해 Context를 구독하는 자식 컴포넌트(Modal.Header)는 React.memo와 관계없이 무조건 리렌더링됩니다.
  • Context를 구독하지 않는 자식 컴포넌트(Modal.Body 등)는 부모 컴포넌트(Modal)의 리렌더링으로 인해 함께 리렌더링됩니다.
• 해결 방법 및 적용:
  • useCallback: 함수형 props의 참조를 고정하여 불필요한 함수 재생성을 방지합니다. (const onHide = useCallback(() => setModalOpen(true), []);)
  • useMemo: 객체나 배열과 같은 복잡한 값의 참조를 고정하여 Context value 변경으로 인한 리렌더링을 막습니다. (const contextValue = useMemo(() => ({ onHide }), [onHide]);)
  • React.memo: props가 변경되지 않았을 때 컴포넌트의 렌더링을 방지합니다. Context를 구독하지 않는 컴포넌트에 효과적입니다.
• Context와 React.memo의 상호작용:
  • useContext를 통해 Context를 구독하는 컴포넌트는 Context value가 변경되면 React.memo와 상관없이 무조건 리렌더링됩니다. 이는 React.memo의 얕은 비교(shallow compare)보다 우선 순위가 높기 때문입니다.
  • Modal.Header와 같이 Context를 직접 구독하는 컴포넌트는 useCallback/useMemo로 참조를 고정해도 Context value 변경 시 리렌더링됩니다.
• 최적화 흐름:
  1. 함수는 useCallback으로 참조를 고정합니다.
  2. 객체/배열은 useMemo로 참조를 고정합니다.
  3. Context를 구독하지 않는 컴포넌트는 React.memo로 감싸 리렌더링을 방지합니다.
  4. Context를 구독하는 컴포넌트는 React.memo로는 리렌더링을 막을 수 없으므로, Context 사용 자체를 재고하거나 구조를 변경하는 방안을 고려해야 합니다.

개발 임팩트

• React 애플리케이션의 성능을 눈에 띄게 개선할 수 있습니다.
• 컴포넌트 생명주기와 렌더링 메커니즘에 대한 깊이 있는 이해를 얻을 수 있습니다.
• useCallback, useMemo, React.memo를 상황에 맞게 적절히 사용하여 최적화 효율을 극대화하는 방법을 배울 수 있습니다.
• useContext 사용 시 발생할 수 있는 성능 이슈를 사전에 인지하고 대비할 수 있습니다.

커뮤니티 반응

(본문 내용에는 특정 커뮤니티 반응에 대한 언급은 없습니다.)

톤앤매너

실제 개발 경험을 바탕으로 문제점을 진단하고 해결책을 제시하는 전문적이고 실용적인 톤을 유지합니다. 실험적인 코드와 console.log를 통한 검증 과정을 상세히 공유하여 신뢰도를 높입니다.