useCallback은 주로 렌더링 성능을 최적화해야 하는 상황에서 사용된다. 이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있습니다.
함수를 선언하면 컴포넌트가 리렌더링될 때마다 새로 만들어진 함수를 사용하게 됩니다. 대부분의 경우 이러한 방식은 문제없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이부분을 최적화해 주는 것이 좋습니다.
useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 합니다.
비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용하게 되며 배열 안에 값을 넣게 되면 값이 바뀔 때 새로 만들어진 함수를 사용하게 됩니다.
함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 합니다.
const [list,setList]=useState([]);
const [number, setNumber] = useState('');
const onChange = useCallback(e=>{
setNumber(e.target.value);
},[]); // 컴포넌트가 처음 렌더링될 때만 함수 생성
const onInsert = useCallback(() => {
const nextList = list.concat(parseInt(number));
setList(nextList);
setNumber('');
}, [number,list]); // number 혹은 list가 바뀌었을 때만 함수 생성