useCallback Hook

green9930·2022년 5월 7일
0

React 공부

목록 보기
13/13
  • 이전에 만든 함수를 재사용할 때 사용한다.
  • 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 배열
profile
I am FrontEnd Developer :)

0개의 댓글