React - useMemo

Hook이란?

Hook은 React 16.8에 새로 추가된 기능이다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. 

 

Hook을 사용할 때는 두 가지 규칙을 준수해야만 한다.

1. 리액트 함수의 최상위에서만 호출하여야 한다.

2. 오직 리액트 함수 내에서만 사용되어야 한다.

 

useMemo

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

function Calculator({value}){

	const result = calculate(value);

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

위의 컴포넌트는 props로 넘어온 value 값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, <div> 엘리먼트로 출력하고 있다. 만약 여기서 calcualte가 복잡한 연산을 해야하는 함수라 계산된 값을 반환하는 데에 시간이 몇 초 이상 걸린다고 가정해보자. 그렇다면 해당 컴포넌트는 렌더링을 할 때마다 이 함수를 계쏙해서 호출할 것이고, 그때마다 시간이 몇 초이상 요소되게 될 것 이다.

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