리액트 - useCallback 함수를 사용하여 함수 재사용하기

한번 만든 함수를 재사용할수 있으면 재사용하는 것이 좋다. 만약 컴포넌트들이 props가 바뀌지 않았다면 가상 돔에서 하는 리렌더링을 하는 것이 아니라. 이전에 만들었던 결과물을 재사용할수 있게끔 만들 수 있다.
함수의 재사용을 위해서 useCallback 함수를 사용한다.

const onCreate = useCallback(() => {
  const user ={
    id: nextId.current,
    username,
    email
  };
  setUsers([...users, user]);
  setInputs({
    username: '',
    email: ''
  });
  console.log(nextId.current);
  nextId.current +=1;
},[username,email,users]);

예를 들어서 위의 onCreate함수에 useCallback를 사용했으며 이때, 두번째 파라미터는 새로 사용되는 조건의 기준이 되는 요소를 넣는다. 지금 위의 경우는 username 과 email과 users가 되어있는데, 이들중 하나의 요소의 변경이 생길 때에만 함수가 새롭게 만들어지는 것이고, 아닐 경우에는 리렌더링 되지 않게 하는것이다.