useCallback

리렌더링 간에 함수 정의를 캐싱해준다.

🤓 기본 문법

useCallback(fn, dependencies);

fn : 인자, 반환값을 가질 수 있고, 첫 렌더링에서 해당 함수를 반환한다.
dependencies : 값이 같다면 같은 함수를 반환하고, 변경되었다면 전달한 함수를 반환하고 재사용이 가능하도록 저장한다.
-> useCallback의 반환값은 전달한 fn 함수를 반환하는 것이다.

✅ 기본 사용법

function parentComponent () {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
  	console.log('Button click');
  },[count])
  
  return (
  	<button onClick={handleClick}></button>
  )
}

위 코드에서 useCallback을 사용하지 않았다면, handleClick이 호출 될 때마다 새롭게 함수가 정의 된다. 하지만 useCallback을 사용해서 함수를 감싸주면, dependencies에 들어간 count가 변경되지 않는 한 함수는 캐싱된다.