react useMemo와 useCallback은 다르다구요!

(이 포스팅까지 흘러 들어왔다면 자바스크립트에 대하여 아주 얕게라도 안다는 기준 하에-)

스크립트를 짜다보면 컴포넌트를 만들어 사용성을 높이는 코드를 굉장히 많이 고민하게 된다. 컴포넌트를 호출하게 되면 하위(자식) 컴포넌트들도 함께 호출하게 되는데, 문제는 여기에서 시작된다. 내가 컴포넌트 내에세 하나의 상태 값을 변경하였을 때, 함께 온 자식 컴포넌트들까지 모두 랜더링 되는 상황이 발생하기 때문이다.

이렇게 되면 불필요한 랜더링의 반복으로 의도하지 않은 메모리 과사용 등 여러 문제가 발생하게 된다. 이렇게 의도하지 않은 상황을 막고자 처리하는 방법이 바로 useMemo와 useCallback Hook의 사용이다.

이 둘은 비슷하면서 다르기 때문에 많이 비교된다.

---

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

공식 홈페이지에서 useMemo를 설명하는 첫 마디는 '메모제이션 된 값을 반환합니다.'라는 말이다.
https://ko.reactjs.org/docs/hooks-reference.html#usememo

Hooks API Reference – React

메모제이션이란 '메모리에 넣어 기억하겠다.' 라고 이해하면 편한데, 말 그대로 어떤 값을 메모리에 기억해두겠다는 의미이다. 만약 기억하고 있는 값과 동일한 값을 필요로 하는 어떤 로직이 발생하게 되면 메모리에 기억하고있는 값을 가지고와서 사용하게 된다. (너무 남용해서 메모제이션 하면 메모리를 더 과하게 쓸 수 있음 주의-!)

* 백문이 불여일견. 꼭 하단 코드가 아니더라도 헷갈리는 사람은 예시 코드를 따라하길 권장한다-!

const [num, setNum] = useState(0);
const [anotherNum, setAnotherNum] = useState(100);

console.log('num = ', num);

return (
    <>
      <button onClick={() => setNum(num + 1)}>num + 1 버튼</button>
      <button onClick={() => setAnotherNum(anotherNum - 1)}>anotherNum - 1 버튼</button>
    </>
)

나는 예시로 num과 anotherNum을 설정해주고, 각각 +1, -1을 계산하는 버튼을 생성하였다.

그리고 console로 num을 찍고 있는데, 여기서 문제가 발생한다. 나는 anotherNum을 클릭하는데, num의 숫자 정보를 알려주게 되는 현상이다. 컴포넌트 특성상 어떤 상태값이 변경되면 렌더링 하는 특징 때문에 anotherNum을 클릭하여도 num의 콘솔도 함께 찍히게 되는 것이다.

편의를 위해 클릭한 버튼 이름을 console에 추가하였다.

이때 useMemo Hook을 추가해주면 되는데, 코드를 다음과 같이 수정해보자. console 코드를 지우고, useMemo를 추가해준다.

useMemo(() => console.log('num = ', num), [num]);

해당 뜻은 num의 변수가 변경 될 때에만 num 값을 찍겠다는 의미이다.

이때 우리는 console을 찍어 확인하였지만 useMemo는 궁극적으로 '값'을 반환하는 함수로 다음과 같은 형식으로 변수에 저장하여 사용한다.