[React] 메모이제이션 / useMemo(), useCallback(), React.memo에 대하여

React의 메모이제이션은 성능 최적화를 위한 개념이다.

결과나 함수 등을 캐싱하여 동일한 입력에 대해 이전 결과를 재사용하는 방식으로 특히 계산 비용이 높은 작업을 반복하지 않기 위해서 사용한다.

React의 메모이제이션 도구

React.memo

컴포넌트 자체를 메모이제이션해 전달받는 props가 변하지 않으면 리렌더링 방지

const ListComponent = ({ value }) => {
	return <div>{value}</div>;
}

export default React.memo(ListComponent);

• props를 기준으로 리렌더링 여부를 결정하므로 props가 변경되지 않으면 리렌더링 되지 않음.
• 다만, shallow comparison으로 props를 비교하므로 몇가지 주의할 점이 있다.
  • 배열의 인덱스가 순차일 경우: 2500개의 배열에서 1000번째 데이터가 삭제될 경우, 1001번째 데이터부터 인덱스가 앞으로 재정렬되기 때문에 수많은 리렌더링이 발생하게 된다.
  • 전달 받은 함수나 값이 자주 재생성될 경우: 부모 컴포넌트가 리렌더링될 때마다 새로운 함수 객체가 생성되거나 새로 값을 생성하게 되면 참조 값이 변하기 때문에 의도와 다르게 리렌더링이 발생하게 된다. 이를 보완하기 위해 해당 props에 대해 부모 컴포넌트에서 useCallback 이나 useMemo 를 이용해 메모이제이션 해주어야 한다.

 

 

useMemo

계산 비용이 비싼 결과(값)을 메모이제이션하여 재사용

const expensiveValue = useMemo(() => {
	return expensiveCal(x);
}, [x]);

• 의존성 배열을 통해 `x` 가 변경될 때만 계산 함수를 실행
• 불필요한 계산을 방지해 렌더링 시 마다의 비용을 최소화한다.
• 다만, 메모이제이션 하기 위한 비용도 발생하기 때문에, 값에 대한 캐싱 필요성이 명확한 경우에만 사용해야 한다.

 

 

 

useCallback

함수를 메모이제이션하여 불필요한 함수 재생성을 방지

const handleClick = useCallback(() => {
  navigate('/');
}, []);

• handleClick 같은 함수를 메모이제이션하여 컴포넌트 렌더링 시마다 새로 생성하지 않는다.
• 함수도 onClick={handleClick} 같이 props로 전달하는 경우가 있는데, 부모 컴포넌트에서 리랜더링이 발생하게 되면 이에 따라 함수도 새로 생성하게 된다. 즉, 해당 함수에 대한 참조 값이 달라지게 되므로 자식 컴포넌트에서 불필요한 렌더링이 발생할 수 있다.

 

 

렌더링 성능 최적화를 위한 메모이제이션 구성

다음과 같이 2500개의 todoList가 존재할 때, 위의 3가지 메모이제이션 도구를 적절히 활용해 렌더링 성능을 최적화 할 수 있다.