React 컴포넌트 깜빡임 해결: Context API 리렌더링 최적화

React 컴포넌트가 깜빡이는 이유와 해결 방법

카테고리

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

서브카테고리

웹 개발

대상자

React 프레임워크를 사용하는 개발자, 특히 성능 최적화에 관심 있는 중급 이상 개발자

핵심 요약

  • React Context API의 불필요한 리렌더링 문제를 해결하기 위해 React.memouseMemo 사용
  • useMemo를 통해 Context 값이 변경되지 않을 경우 객체 재생성 방지
  • React.memo로 변화 없는 하위 컴포넌트의 리렌더링 제거
  • value 객체의 메모리 참조 변경이 리렌더링의 주요 원인

섹션별 세부 요약

1. Context로 인한 리렌더링 문제

  • App 컴포넌트 리렌더링 시 하위 모든 컴포넌트(Search, Container, SearchContainer)가 강제로 리렌더링
  • Context 값이 변경되지 않았더라도 객체의 메모리 참조가 변경되면 리렌더링 발생
  • 예: { a: 'tchaca', b: 'arrocha' } 객체가 매번 새로 생성되면서 리렌더링 유발

2. React.memo로 리렌더링 제거

  • ContainerSearchContainer 컴포넌트에 React.memo 적용
  • React.memo컴포넌트 내부 상태가 변경되지 않을 경우 리렌더링 방지
  • 코드 예시:
  • const Container = React.memo(() => {
      return ;
    });

3. useMemo로 Context 값 안정화

  • useMemo를 사용해 value 객체가 의존성 배열([a, b])에 있는 값이 변경될 때만 재생성
  • useMemovalue 객체의 메모리 참조를 일관되게 유지
  • 코드 예시:
  • const value = useMemo(() => ({ a, b }), [a, b]);

결론

  • React.memouseMemo를 조합해 불필요한 리렌더링 최적화
  • Context 값이 변경되지 않았다면 useMemo로 객체 재생성 방지
  • useMemo의 의존성 배열은 실제 변경될 값만 포함해야 성능 개선 효과 최대화