11/21 (Thur) ch03-hooks/05-useMemo

useMemo

• 지정한 함수를 호출하여 반환받은 결과값을 내부에 저장(캐싱)하는 함수

API

const calculateValue = function(){ ... };
const cachedValue = useMemo(calculateValue, dependencies);

매개변수

• calculateValue: 캐싱할 값을 계산하여 반환하는 순수 함수
• dependencies: 의존 객체 배열
  • 계산 결과에 영향을 주는 calculateValue 함수의 인자값
  • 이 배열의 값이 하나라도 변경되면 calculateValue 함수를 다시 호출하고, 변경되지 않으면 캐시된 값을 반환
  • 빈 배열을 지정하면 의존성이 없으므로 매번 캐시된 값을 반환

리턴값

• calculateValue 함수를 호출한 결과값
• 다음 렌더링 중에는 dependencies가 변경되지 않으면 캐시된 결과를, 변경되었으면 calculateValue 함수를 다시 호출한 결과값

React.memo

• 컴포넌트를 memoize한 후 리렌더링 될 때 props가 변경되지 않으면 memoize된 컴포넌트를 반환
• 컴포넌트가 리렌더링될 때 props가 변경되지 않으면 최종적으로 브라우저 DOM에 쓰기 작업이 이루어지지 않지만, 가상 DOM 생성과 비교 작업에도 리소스가 사용되므로, memoize된 컴포넌트는 성능 향상에 도움을 줄 수 있음
• 리렌더링 될때 눈에띄게 지연이 발생하는 경우 사용

API

const MemoizedComponent = React.memo(SomeComponent, arePropsEqual?)

매개변수

• SomeComponent: memoize할 대상 컴포넌트
• arePropsEqual(선택): memoize된 컴포넌트를 반환할지, 컴포넌트를 다시 호출할지를 결정하는 함수
  • 컴포넌트의 이전 props 및 새로운 props를 인자로 받는 함수
  • true를 반환하면 memoize된 컴포넌트를 사용하고, false를 반환하면 컴포넌트를 다시 호출한 결과값을 사용
  • 생략 시 이전 props와 새로운 props를 얕게 비교하여 같으면 true, 다르면 false를 반환하는 기본 동작

리턴값

• memoize된 SomeComponent

React.memo 사용 시점

• 컴포넌트 호출 시 시간이 오래 걸리는 연산 작업이 있는 경우
  • memoize된 컴포넌트를 재사용하면 컴포넌트 호출 횟수를 줄일 수 있음
• 리렌더링될 때 props가 자주 변경되지 않는 컴포넌트
  • props가 자주 변경되는 컴포넌트에는 props를 비교하는 로직이 불필요하게 동작하므로, 오히려 성능에 좋지 않음