useCallback 은 useMemo를 기반으로 만들어져서 두 개는 비슷한 점을 가진 Hooks 이다.
useMemo는 특정 결과값을 재사용 할 때 쓰고, useCallback은 특정 함수를 재사용 할 때 사용한다.
useCallback를 사용할 때 함수 안에서 사용하는 state, props가 있다면,
반드시 deps 배열 안에 포함시켜야한다.
그리고 컴포넌트에서 prosp로 함수를 받아왔다면 그 함수도 deps에 포함시켜야한다.
함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야한다.
그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다.
useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다.
함수가 새로 만들어지는 것이 성능을 떨어뜨리지는 않지만,
컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할 때 함수을 재사용하는 것이 필요하다.
기본 형태 :
useCallback( function, deps )
(배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.
함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다.)
const onSubmit= useCallback(()=>{
if(password !== passwordCheck) {
setPasswordError(true);
return;
}
if(!term){
console.log("대체 term 이 왜>>>", term); //왜??????
setTermError(true);
return;
}
console.log(id,nickName,password,passwordCheck, term);
},[password, passwordCheck,passwordError]); //여기에 term이 들어가야지만 작동된다... 이유를 알아보자... 함수 안에서 쓰이므로 넣어줘야 된다..