[React] 함수의 재생성 방지해주는 useCallback로 퍼포먼스 향상하기

useCallback(callback, deps)

useCallback은 함수를 의미없이 호출하는 것을 방지하기위해 캐싱해두는데,
deps의 값들 중 하나라도 변경되었다면 그것을 감지해서 함수를 새로만든다.
바뀐게 없으면 이전에 만든 함수를 사용함.

const onSubmit = useCallback((e)=>{
    e.preventDefault();
    console.log(email, nickname)
}, [email, nickname])

 

내부 변수(=e)는 선언할 필요가 거의 없고, 외부변수인 경우만 deps 추가해주도록한다.