useCallback

useCallback 은 useMemo 와 비슷하게도 memoization 합니다.
useMemo 는 반환 값을 기억한다면 useCallback 은 콜백함수를 기억 합니다.

useCallback 은 두개의 인자를 받습니다.

const example = useCallback(()=> {
  console.log("콜백함수");
},[])

첫번째 인자로는 memoiztion 해줄 콜백 함수, 두번째 인자로는 dependeny array 를 받습니다. dependency array 의 값들이 바뀌면 새로운 함수로 초기화 합니다. 만약 빈 배열이라면 처음 렌더링 될 때만 함수를 초기화 하고 이후에 렌더링 될 때는 그 함수를 계속 사용하게 됩니다.

예를 들어 useEffect 를 사용해서 example 함수가 새로 초기화 될 때만 어떤 작업을 하도록 코드를 작성해 봅시다.

useEffect(()=> {
  console.log("작업중");
},[example]);

만약 example 함수에 useCallback 으로 감싸지 않았다면 컴포넌트가 리 렌더링 될 때마다 example 함수는 계속 초기화 되기 때문에 React 는 example 함수가 변경된 줄 알고 useEffect 의 콜백 함수를 렌더링 될 때마다 계속 실행시키게 될 것입니다.