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
꾸준한 모습 멋져용