React useCallback과 useMemo 차이

성능 최적화란?

useCallback과 useMemo는 성능 최적화를 위해 고민하면서 접하게 되었다. 그렇다면 성능 최적화란 무엇일까?

성능 최적화란 컴포넌트가 불필요하게 재렌더링되거나 시간이 많이 걸리는 연산이 반복되는 것을 방지하여 리소스를 효율적으로 관리하는 것을 말한다. 이를 위해 메모이제이션이라는 기법을 사용하게 되는데, 메모이제이션은 이전에 계산한 값을 기억해 두었다가 동일한 입력이 들어왔을 때 다시 계산하지 않고 저장된 값을 재사용하는 방법이다.

 

 이제 메모이제이션을 사용하는 useCallback과 useMemo에 대해 알아보자

useCallback란?

useCallback은 함수를 메모이제이션하는 데 사용된다. useCallback을 통해 함수가 불필요하게 다시 생성되는 것을 방지하고, 특정 함수가 의존성 배열에 따라 동일한 참조를 유지할 수 있도록 한다. 함수를 캐싱하여 동일한 함수가 렌더링될 때마다 다시 생성되지 않도록 하며 만약 함수가 자식 컴포넌트에 전달된다면 해당 자식 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지할 수 있다. 

import React, { useState, useCallback } from 'react';

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

  // 매번 새로운 함수가 생성되지 않도록 useCallback으로 감싸준다.
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 의존성 배열 : count가 바뀔 때만 함수가 새로 생성된다.

  return (
    <div>
      <ChildComponent increment={increment} />
      <p>Count: {count}</p>
    </div>
  );
};

const ChildComponent = React.memo(({ increment }) => {
  console.log('ChildComponent가 렌더링되었다!');
  return <button onClick={increment}>Increment</button>;
});

useMemo란?

useMemo는 값을 메모이제이션하는데 사용된다. useMemo를 통해 계산된 결과 값을 캐싱하여 재사용할 수 있다. 값을 캐싱하여 의존성 배열에 포함된 값이 변경되지 않는 한 재계산을 방지할 수 있다. 

import React, { useState, useMemo } from 'react';

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

  // useMemo를 사용하여 계산된 값을 메모이제이션 한다
  const expensiveComputation = useMemo(() => {
    console.log("비싼 계산 수행 중...");
    return count * 1000;
  }, [count]); // count가 바뀔 때만 재계산한다

  return (
    <div>
      <p>Computed Value: {expensiveComputation}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;