React - useMemo, React.memo

useMemo

리렌더링을 최적화 하기 위해서 사용하는 훅

특정 계산을 수행하고 그 결과를 기억한다.
해당 연산의 결과가 변하지 않는 한 계산을 다시 실행하지 않는다.

컴포넌트도 함수이다.
컴포넌트가 렌더링 된다는 것은 함수가 호출된다는 것이다.

컴포넌트가 리렌더링 되는 시점

• 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다.
• 부모 컴포넌트로 부터 받는 prop이 변경될 때 리렌더링된다.
• 부모 컴포넌트의 상태가 변경되면 리렌더링된다.

예제

버튼을 눌러 부모 컴포넌트의 상태를 변경하면 자식 컴포넌트의 sum 함수가 재호출되는 문제가 발생한다.

useMemo를 통해 사용되는 상태가 변경될 때만 함수가 재호출 되도록 변경할 수 있다.

첫 번째 인수는 실행 할 표현식, 두 번째 인수는 감지할 상태를 지정한다.

위와 같이 변경하면 처음 한 번만 실행되고 이후에 부모 컴포넌트가 변경되어도 재호출이 되지 않는다. (n이 변경 되었을 때만 재호출)

React.memo

React.memo 함수를 사용하면 부모 컴포넌트의 상태가 변경되어도 자식 컴포넌트가 리렌더링 되지 않는다.

이전 렌더링 결과를 메모이제이션하여 동일한 props가 전달될 경우 렌더링을 스킵한다.

예제

아래 예제는 count가 변경될 때마다 Box 컴포넌트가 리렌더링 되는 현상이 발생한다.

Box 컴포넌트를 React.memo 함수로 감싸주면 부모 컴포넌트가 변경되어도 더 이상 리렌더링 되지 않는다.