React.memo, useMemo, useCallback — 실전 활용

목표: 세 가지 도구를 사용하세요:

• React.memo — 프로퍼티가 같으면 자식 컴포넌트의 다시 렌더링 건너뛰기
• useMemo — 파생 값 메모이제이션하기
• useCallback — 함수 프로퍼티를 안정적으로 유지하기

다음과 같은 경우 사용하세요:

• 자식 컴포넌트의 처리 비용이 크거나 자주 변경되지 않는 경우
• 파생 데이터의 처리 비용이 크거나 안정적인 경우
• 메모이제이션된 자식 컴포넌트에 이벤트 처리 함수를 전달하는 경우

지나친 최적화를 하기 전에 프로파일링하세요.

React.memo는 프로퍼티가 같으면 다시 렌더링하지 않습니다. 이벤트 처리 함수의 참조를 안정적으로 유지하려면 useCallback과 함께 사용하세요.

useMemo로 파생 목록을 계산하면 입력값이 변경되지 않는 한 그 참조를 안정적으로 유지할 수 있습니다.

메모이제이션된 행에 안정적인 onSelect를 전달하면 변경되지 않은 행은 다시 렌더링되지 않습니다.

팁:

• 효과가 있는 곳에서만 메모이제이션하세요
• 종속성 배열을 올바르게 유지하세요
• React.memo를 돕도록 안정적인 프로퍼티를 우선 사용하세요

요약: React.memo는 같은 프로퍼티에서 다시 렌더링을 건너뛰고, useMemo는 파생 값의 참조를 안정화하며, useCallback은 이벤트 처리 함수의 참조를 안정적으로 유지합니다.