useMemo

useMemo

useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다.

function Calculator({value}){

	const result = calculate(value);

	return <>
      <div>
					{result}
      </div>
  </>;
}

위의 컴포넌트는 props로 넘어온 value 값을 calculate 라는 함수에 인자로 넘겨서 result 값을 구한 후, div 엘리먼트로 출력을 하고 있다.

만약 여기서 calculate 함수가 내부적으로 복잡한 연산을 해야 하는 함수라 계산된 값을 반환하는 데에 시간이 몇 초 이상 걸린다고 가정해보자.
그렇다면 해당 컴포넌트는 렌더링을 할 때마다 이 함수를 계속해서 호출할 것이고, 그 때마다 시간이 몇 초 이상 소요가 될 것이다. 이 몇 초의 지연은 렌더링에도 영향을 미칠 것이고, 사용자 경험도 좋지 않을 것이다.

/* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import { useMemo } from "react";

function Calculator({value}){

	const result = useMemo(() => calculate(value), [value]);

	return <>
      <div>
					{result}
      </div>
  </>;
}

이런 식으로 useMemo를 호출하여 calculate을 감싸주면, 이전에 구축된 렌더링과 새롭게 구축되는 렌더링을 비교해 value값이 동일한 경우에는 이전 렌더링의 value 값을 그대로 재활용할 수 있게 된다.
이는 메모이제이션(Memoization) 개념과 긴밀한 관계가 있다.

Memoization

메모이제이션은 알고리즘에서 자주 나오는 개념이다. 기존에 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다. 이 메모이제이션을 적절히 사용한다면 굳이 중복 연산을 할 필요가 없기 때문에 앱의 성능을 최적화할 수 있다.

useMemo는 바로 이 개념을 이용하여 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화 시킨다.