useMemo

박주홍·2022년 7월 6일
0

useMemo

useMemo를 이해하기 전 memorization을 이해해야한다. 예를들어 다음과 같은 컴포넌트함수가 있다고 치자

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

부모 컴포넌트에서 props로 x, y가 들어올때마다 MyComponent는 재랜더링된다. 만약 compute함수가 시간이 오래걸리는 함수라면 x, y가 그 전에 똑같은 입력값이 들어왔을때 어느 메모리한 곳에 출력값을 저장해두고 바로 웹으로 따지면 캐시마냥 출력을 하면 안될까? 하는 게 memorization이다.

즉 동일한 입력값이 들어올경우 동일한 출력값을 내보내는 기능을 말한다. 그 기능을 useMemo가 도와줄 것이다.

위와 같은 함수를 useMemo를 사용하면 다음과 같이 바꿀 수 있다.

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

x와 y값이 이 전에 랜더링 했을때와 동일할 경우, 이 전 랜더링 때 저장해두었던 결과값을 재활용한다.

참조 : https://www.daleseo.com/react-hooks-use-memo/
참조2 : https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html

profile
고통없는 성장은 없다고 할 수 있겠다....

1개의 댓글

comment-user-thumbnail
2022년 7월 12일

꾸준한 모습 멋져용

답글 달기