useCallback Hook

• 이전에 만든 함수를 재사용할 때 사용한다.
• useMemo와 유사하나 useCallback은 함수를 위한 hook

App.js

function App() {
  /* ... */
  const onChange = useCallback((e) => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  }, [inputs]);
  /* ... */
}

• inputs는 useState로 관리되는 상태
• 의존성 배열 [inputs]를 넣는다. (useCallback 내부에서 참조할 때 최신 상태를 유지하기 위해)
• onChange 함수는 inputs가 바뀔 때에만 새로 만들어지고, 바뀌지 않으면 기존 함수를 재사용하게 된다.

  const onCreate = useCallback(() => {
    // 새로운 user 객체 생성
    const user = {
      id: nextId.current,
      username,
      age,
    };

    setUsers([...users, user]);

    setInputs({
      username: "",
      age: "",
    });

    nextId.current += 1;
  }, [users, username, age]);

• 최신 상태를 유지해야 하는 users 배열