18. useCallback을 사용하여 함수 재사용하기

useCallback vs. useMemo

useCallback : 특정 함수를 새로 만들지 않고 재사용하고 싶을 때

useMemo : 특정 결과값을 재사용할 때

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

❗

함수안에서 사용하는 상태 혹은 props가 있다면 꼭, deps 배열 안에 포함시켜야 된다.

만약, deps 배열 안에 함수에서 사용하는 값을 넣지 않게된다면, 함수 내에서 해당 값들을 참조할 때 가장 최신값을 참조할 것이라 보장할 수 없다.

props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야한다.