useCallback대신 useMemo를 사용해서 함수 메모리제이션 해보기

useMemo와 useCallback

• useMemo와 useCallback은 둘다 React에서 memorization을 위해 사용된다
  • memorization을 다른 말로 하면 cashing으로 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거해서 프로그램 실행 속도를 향상 시키는 것이다.

이 블로깅에서 말하고 싶은건 useMemo와 useCallback의 사용법이나 사용해야될 때를 말하고 싶은 것이 아니라서 여기서 자세한 설명은 하지 않는다.

useMemo와 useCallback의 차이점과 파생된 궁금증

• useMemo와 useCallback의 유일한 차이점은 다음과 같다.
  • useMemo는 결과값을 캐싱한다.
  • useCallback은 함수 자체를 캐싱한다.

• 여기서 파생된 궁금증은 이렇다.
  • 그럼 useMemo를 사용해서 결과값을 함수로 리턴해서 함수를 기억하게 하면 useCallback 과 같은거 아닐까

직접 해보자

그럼 다음과 같은 순서로 해보면 궁금증을 해결할 수 있을것 같다.

1. useMemo를 사용한다.
2. useMemo는 결과 값을 리턴하니까 값 대신 함수를 리턴한다. (커링 함수)
3. console.log 를 사용해서 정말 캐싱되었는지 살펴본다.

이제 궁금증을 해결해보자

import { useMemo, useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);

  // useMemo로 memorization한 add 함수
  const sumMemo = useMemo(() => {
    console.log("sumMemo");
    return (a, b) => {
      return a + b;
    };
  }, []);
  console.log(sumMemo(1, 2));
  
  // useCallback으로 memorization한 add 함수
  const sumCallback = useCallback((a, b) => {
    return a + b;
  }, []);
  console.log(sumCallback(2, 3));

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>버튼</button>
    </div>
  );
}

• 버튼을 눌러도 console.log("sumMemo")가 찍히지 않고, 매개변수에 인자도 잘 전달된다.

그럼 useCallback이 useMemo의 Syntax Sugar인가?

결론 부터 말하면 Syntax Sugar라고 할 수 없다.

• 여기에 대해서는 필자는 맞다고 주장을 했었지만 서칭을 하다보니 아니라고 한다.

  • 이 이유는 대체할 수 있느냐가 아니라 1:1 매칭이 되느냐가 문제라고 생각한다.

이유

1. 의도된 용도 (이는 위에 useMemo와 useCallback의 차이점과 파생된 궁금증 에서 나온 차이점에서 나온다.)
2. 리턴값
   1. useCallback은 memorization된 콜백 함수를 반환한다.
   2. useMemo는 memorization된 값을 반환한다.

두 훅이 비슷한 효과를 낼 수 있다고 해도, 각각의 다른 목적을 가지고 있다. Syntax Sugar는 일반적으로 더 간편한 문법이나 API를 의미하는데, useMemo를 useCallback처럼 사용할 수 있더라도 두 훅이 서로 대체 가능하다는 것을 의미하지 않는다.

• 즉 useCallback은 useMemo로 구현 가능해도 useMemo는 useCallback으로 구현 이 불가능해서 이다.