useCallback

출처: chat gpt

useCallback을 사용하는 이유는?

React 컴포넌트에서 상태(state)가 변경될 때, 컴포넌트가 리렌더링되고 이에 따라 함수들도 다시 생성됩니다. 이는 성능에 영향을 줄 수 있습니다. 특히 자식 컴포넌트로 전달되는 콜백 함수가 자주 변경되는 경우에는 불필요한 리렌더링이 발생할 수 있습니다.

만약 부모 컴포넌트가 자식 컴포넌트로 콜백 함수를 전달하는 경우를 생각해보겠습니다. 부모 컴포넌트의 상태가 변경되면 부모 컴포넌트가 리렌더링되고, 이에 따라 콜백 함수도 새로 생성됩니다. 이러한 상황에서 자식 컴포넌트는 새로운 콜백 함수를 전달받아야 합니다.

이때, useCallback 훅을 사용하여 콜백 함수를 최적화할 수 있습니다. useCallback은 이전에 생성된 콜백 함수를 재사용하여, 부모 컴포넌트가 리렌더링되어도 같은 콜백 함수를 계속해서 사용합니다. 이는 불필요한 함수 재생성을 방지하여 메모리 사용을 최적화하고 성능을 향상시킵니다.

import { useCallback, useRef } from "react";
import TodoInsert from "./components/TodoInsert";
import TodoTemplate from "./components/TodoTemplate";
import TodoList from "./components/Todolist";

function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: '리액트의 기초 알아보기',
      checked: true,
    },
    {
      id: 2,
      text: '컴포넌트 스타일링해 보기',
      checked: true,
    },
    {
      id: 3,
      text: '일정 관리 앱 만들어 보기',
      checked: false,
    },
  ]);

  const nextId = useRef(4);

  const onInsert = useCallback(
    text => {
      const todo = {
        id: nextId.current,
        text,
        checked: false
      };
      setTodos(todos.concat(todo));
      nextId.current += 1;
    },
    [todos],
  );

  return (
    <div>
      <TodoTemplate>
        <TodoInsert onInsert={onInsert}/>
        <TodoList todos={todos}/>
      </TodoTemplate>

    </div>
  );
}

export default App;

useCallback을 사용하여 onInsert 함수를 최적화하는 것은 TodoInsert 컴포넌트의 성능을 향상시키기 위함입니다. todos 배열이 변경되지 않는 한 같은 함수를 재사용하므로, 불필요한 함수 재생성과 컴포넌트의 리렌더링을 방지할 수 있습니다.

만약, todos를 의존성 배열로 사용하지 않으면 업데이트되지 않은 todos 변수를 사용할 수 있습니다.