useCallback은 memoization 기법으로 컴폰너트 성능을 최적화시켜준다.
메모이제이션은 자주 사용되는 값을 받아오기 위해 반복적으로 계산해야한다면 이전에 이미 계산한 값을 캐싱해놓고 필요할 때마다 계산하지 않고 메모리에서 꺼내와서 사용한다.
useCallback
useCallback은 콜백함수 자체를 메모이제이션 해준다.
useMemo가 함수의 리턴값을 메모이제이션했다면 useCallback은 함수를 기억해놓는다.
const func = useCallback((name)=>{
return `${name} 안녕`;
}, []);리액트의 함수형 컴포넌트는 렌더링될 때마다 함수가 재호출되기 때문에 컴포넌트 내부의 모든 변수가 초기화 된다.
그렇기 때문에 함수 표현식으로 만든 함수는 계속해서 같은 함수를 다시 만들어서 변수에 저장할 것인데 렌더링 될 때마다 불필요하게 같은 함수를 계속 만들어서 저장하게 될 것이다.
이때 useCallback 을 사용하면 useCallback으로 감싼 함수를 기억해놓고 있기 때문에 재렌더링 되더라도 해당 함수를 또 만들어서 변수에 할당하지 않고 기억해둔 함수를 그대로 사용하게 된다.
useEffect를 사용하면 맨 처음 렌더링 될 때만 함수 객체가 생성되고 그 이후부터는 이미 만들어진 함수 객체를 계속 사용한다.
useCallback은 첫번째 인자로 메모이제이션할 콜백 함수, 두번째 인자는 의존성 배열을 작성해주면 된다.
두번째 인자인 의존성 배열 값이 업데이트되지 않는 이상은 useCallback으로 감싼 함수는 리렌더링이 될 때 다시 함수 객체를 생성하여 변수에 할당하지 않는다.
즉, 두번째 인자로 빈 배열을 넘긴 경우엔 처음에만 함수 객체를 만들어서 변수에 할당하고 이후부터는 이미 만든 것을 계속 사용하겠다는 의미이고 만약 두번째 인자에 빈 배열이 아닌 다른 값을 넣었다면 넣은 값이 변경되어 리렌더링 될 때 해당 useCallback의 콜백함수도 새로운 함수 객체를 만들어서 변수에 할당하게 된다.
