useMemo를 사용하여 연산한 값 재사용하기

성능 최적화를 하는 방법은 여러개가 있다 그 중에서  useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자.

Memoization

기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다

적절히 사용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다.

 

아래 컴포넌트는 인자로 넘어온 x와 y값을 compute함수에 넘겨서 z값을 구한 다음 z를 출력해준다.

function MyComponent({ x, y }) {
  const z = compute(x, y);
  return <div>{z}</div>;
}

만약에, compute 함수가 매우 복잡한 연산을 수행하기 때문에 결과값을 리턴하는데 시간이 오래걸리게 된다면 어떻게 될까? 컴포넌트가 리렌더링 될때마다 함수가 호출되고 사용자는 지속적으로 UI에서 지연을 경험하게 된다.

Memoization적용

렌더링이 발생할때 인자로 넘어오는 x와 y값이 바뀌는게 아니라면 굳이 compute 함수를 계속 호출할 필요가 없다.

랜더링이 발생했을때 이전 렌더링과 현재 렌더링 간에 x와y값이 동일한 경우, compute를 다시 호출하는 대신, 기존에 저장해둔 z값을 그대로 사용한다

function MyComponent({ x, y }) {
  const z = useMemo(() => compute(x, y), [x, y]);
  return <div>{z}</div>;
}

useMemo는 2개의 인자를 받는데 첫번째는 결과값을 생성해주는 함수이고, 두번쨰는 기존 결과값 재활용 여부의 기준이 되는 입력값 배열이다.

 

x와 y값이 이전 렌더링과 동일한 경우 저장해두었던 결과값을 재활용한다. 하지만 x와 y 값이 전과 달라졌을때

() => compute(x, y) 를 실행하여 새로운 z값을 구한다.