[React] useMemo를 이용한 결과값 최적화

Memoization

메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환해 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술이다.

function Component({ a, b }) {
  const result = compute(a, b);
  return <div>{result}</div>;
}

컴포넌트 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는 데 오랜 시간이 걸린다. 이럴 때 컴포넌트가 계속 리렌더링되면 연산을 계속 수행하는 데 오랜 시간이 걸려 성능에 안 좋은 영향을 미치게 되며 UI 지연 현상도 일어나게 된다.

 

이러한 현상을 해결해주기 위해 사용하는 것이 useMemo이다. compute 함수에 넘겨주는 a, b의 값이 이전과 동일하다면 컴포넌트가 리렌더링 되더라도 연산을 다시 하지 않고 이전 렌더링 때 저장해둔 값을 재활용하게 된다.

 

useMemo 적용하기

useMemo로 감싸준 후에 첫번째 인수의 의존성 배열에 compute 함수에서 사용하는 값을 넣는다.

function Component({ a, b }) {
  const result = useMemo(() => compute(a, b), [a, b]);
  return <div>{result}</div>;
}