리액트 훅 useMemo, useCallback

React Memoization 📋

➡ 메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때 맨 처음 계산한 값을 메모리에 저장해서 필요 할때마다 메모리에서 해당 값을 꺼내서 사용하는 것을 말한다.

왜 사용하는지? 💟

state와 props를 통해 수많은 랜더링이 일어난다.
랜더링이 일어날 때 무거운 작업을 수행한다.

남용하면 안되는 이유 🚫

무분별한 사용은 메모리 사용량이 커져 오히려 성는에 더 악화된다.

useMemo

useMemo는 두개의 인자를 받는데 1번째 인자로는 callback 함수, 2번째 인자로는 배열을 받는다.

const value = useMemo(() => {
    return calculate();
},[item])

배열 안의 item이 변경 될 때만 콜백함수를 다시 호출한다.

useCallback

useCallback은 useMemo와 비슷하지만, useMemo는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback은 함수의 재사용 할 때 사용하는 함수이다.

  const onSave = useCallback(() => {
    console.log(name);
  }, [name]);  

name이 변경될 때에만 함수 재생성.

불필요하게 랜더링이 자주 일어나는 곳에 useMemo나 useCallback을 잘 사용해 준다면 성능이 악화되는 형상을 막을 수 있을 것이다.