useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. React 공식 문서에서는 useCallback을 다음과 같이 말하고 있습니다.
메모제이션된 함수를 반한하는 하는 함수입니다.
인라인 콜백과 그것의 의존성 값의 배열을 전달하세요. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.
왜 useCallback을 사용해야 할까요?
현재 하위 컴포넌트에 전달하는 콜백 함수가 inline 함수로 사용되거나, 컴포넌트 내에서 함수를 생성하고 있다면 새로운 함수가 만들어지게 됩니다. 예를 들어보자면, Counter안에 increament함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어지게 됩니다.
함수를 재 선언 하는것은 CPU, 큰 메모리도 차지하지 않지만, 한번 만든 함수를 재 사용하고, 필요할 때만 재생성 하는것은 중요합니다. 아래 예제에서 useCallback과 React.memo를 함께 사용한다면 컴포넌트를 최적화 할수 있습니다.
useMemo는 hooks에서 메모이제이션을 이용하여 변수 값들을 재사용함으로 써 최적화를 해주는 역할을 담당합니다.
예를 들어 컴포넌트 내부에 상황에 따라 변경되지만 자주 변경되지 않는 A라는 값이 있다고 가정해보겠습니다.
또한 컴포넌트는 리렌더링이 빈번하게 일어난다고도 가정해보겠습니다
이런 상황에서 리렌더링이 일어날 때마다 A라는 값은 계속 동일한 값임에도 불구하고 같이 리 렌더링이 되기 때문에 다시 그려주는 작업을 수행해야 합니다.
만약 메모이제이션을 이용하여 값을 저장해 두고 있으면 어떨까요?
메모이제이션을 이용한다면 리 렌더링이 일어남에도 불구하고 단순히 저장된 값을 가져와 사용하면 되기 때문에 처리해야 될 작업량은 줄어들 것이고 결국 더 빠른 속도로 렌더링이 될 수 있게 도와줍니다.
hooks에서 해당 역할을 수행해주는 것이 useMemo입니다.
useMemo와 가장 비교가 많이 되는 것은 useCallback입니다.
왜냐하면 둘다 메모이제이션을 이용하여 최적화를 할 수 있게 도와주기 때문입니다.
하지만 알고 넘어가셔야 될 점은 useCallback은 함수를 재사용하는 것이고 useMemo는 함수 외의 변수와 같은 값들을 재사용한다는 것입니다.
