메모이 제이션, useMemo, useCallback

ReactForget
참고영상 https://www.youtube.com/watch?v=qOQClO3g8-
참고 글 https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#react-compiler

저번 포스팅에서 로딩ui를 위한 useAsync를 분해해 보면서
useCallback, ReactForget의 내용을 간단하게 넣고 ReactForget에 대해 알아보는
포스팅을 올리려고 했것만.. 메모이제이션이나 useMemo에 대한 지식이 부족해서
ReactForget을 검색 해봐도 내용이 이해가 안 갔다...ㅠㅡㅠ 그래서 이번에는
메모이제이션, useCallback, useMemo에 대해 좀 더 자세히 공부해보려 한다.

메모이제이션 (Memoization)

동일한 값을 반환하는 함수를 사용할 때 해당 값을 캐시해 중복 실행을 방지하는 기법
값에 상태 변화가 일어났을 때 useState에 저장하면 렌더링이 발생하지만,
useCallback 또는 useMemo를 사용하면 값이 캐시되어 불필요한 렌더링을 막을 수 있다.

useMemo, useCallback

useMemo

• 반환되는 값을 메모이제이션하여 중복 실행 방지
• 의존성 배열 안에 값들이 변경될 때마다 새로운 값을 계산, 동일한 경우 이전 값 재사용

function App() {
  const a = 1;
  const b = 2;

  const sum = useMemo(() => {
    console.log("계산 중..");
    return a + b;
  }, [a, b]);

  return (
    <div className="App">
      <h2>{sum}</h2>
      <h2>{sum + 1}</h2>
      <h2>{sum + 2}</h2>
    </div>
  );
}

export default App;

해당 코드를 실행하면 메모이제이션된 sum의 반환값을 캐싱하여
1과2를 더해주기 때문에 sum이 실행되면 출력되는 '계산 중..'도 한번만 출력된다
(의존성 배열의 요소 a,b중 하나라도 변화가 있을 시 캐시에 새로운 값이 저장, 리렌더링 된다)

useCallback

• 콜백 함수를 메모이제이션하여 함수의 재생성을 방지
• 의존성 배열 안에 값들이 변경될 때마다 콜백 함수 재생성, 동일한 경우 이전 함수 재사용

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

  const handleClick = useCallback(() => {
    console.log("클릭! count:", count);
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div className="App">
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

export default App;

버튼을 누르면 handleClick의 setCount((prev) => prev + 1)로 인해 상태 변화가 일어나
Count: {count}는 정상적으로 1씩 더해져 출력되지만 handleClick는 캐싱으로
같은 함수가 재사용 됐기 때문에 해당 함수내에서 출력되는 카운트는 변화없이 0으로 출력된다.
(콜백 함수 재사용을 보여주기위해 의존성 배열을 비워두고 코드를 작성했다)

그래서 다시 ReactForget이 무엇인지 알아보자면...!

ReactForget

내가 검색하고 찾은 ReactForget에 대해 말해보자면 ReactForget은 리액트 애플리케이션의
성능을 최적화하는 도구로, 내부적으로 자동 메모이제이션을 수행하여 의존성 배열을 관리 할 필요없이 리액트 컴포넌트의 상태나 프로퍼티가 변경될 때마다 해당 값을 캐싱하는 기능인 것 같다..!

useCallback, useMemo의 코드의 복잡성과 최신상태 유지를 위해 추가작업을 해야한다는 점을
보완해서 나온 반응형 컴파일러인 것 같은데 아직은 데모정도만 나온 것 같다. 일단은 있는 useCallback, useMemo를 쓰면서 단점도 느껴보고 정식으로 나오면 써봐야겠다ㅋㅂㅋ