React 컴포넌트가 깜빡이는 이유와 해결 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 프레임워크를 사용하는 개발자, 특히 성능 최적화에 관심 있는 중급 이상 개발자
핵심 요약
- React Context API의 불필요한 리렌더링 문제를 해결하기 위해
React.memo
와useMemo
사용 useMemo
를 통해Context
값이 변경되지 않을 경우 객체 재생성 방지React.memo
로 변화 없는 하위 컴포넌트의 리렌더링 제거value
객체의 메모리 참조 변경이 리렌더링의 주요 원인
섹션별 세부 요약
1. Context로 인한 리렌더링 문제
App
컴포넌트 리렌더링 시 하위 모든 컴포넌트(Search
,Container
,SearchContainer
)가 강제로 리렌더링Context
값이 변경되지 않았더라도 객체의 메모리 참조가 변경되면 리렌더링 발생- 예:
{ a: 'tchaca', b: 'arrocha' }
객체가 매번 새로 생성되면서 리렌더링 유발
2. React.memo로 리렌더링 제거
Container
와SearchContainer
컴포넌트에React.memo
적용React.memo
는 컴포넌트 내부 상태가 변경되지 않을 경우 리렌더링 방지- 코드 예시:
const Container = React.memo(() => {
return ;
});
3. useMemo로 Context 값 안정화
useMemo
를 사용해value
객체가 의존성 배열([a, b])에 있는 값이 변경될 때만 재생성useMemo
로value
객체의 메모리 참조를 일관되게 유지- 코드 예시:
const value = useMemo(() => ({ a, b }), [a, b]);
결론
React.memo
와useMemo
를 조합해 불필요한 리렌더링 최적화Context
값이 변경되지 않았다면useMemo
로 객체 재생성 방지useMemo
의 의존성 배열은 실제 변경될 값만 포함해야 성능 개선 효과 최대화