📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1
• 참고 자료 2

📜 Chapter

HOC (Higher Order Component)

memo

useEffect

useMemo

React Complier

useCallback

• useCallback
• useCallback은 리렌더링 간에 함수 정의를 캐싱해 주는 React Hook 이다.
• useCallback은 함수를 메모이제이션(memoization)하는 훅이다. 즉, 특정 함수를 기억하여 컴포넌트가 다시 렌더링될 때마다 함수를 새로 생성하는 것을 방지한다.
• 특정 함수를 새로 만들지 않고 재 사용하고 싶을 때 사용한다.
• 함수의 결과 값을 기록하는 것이 아니라 함수 자체를 기록한다.
• useCallback은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수이다.
• 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재 사용할 수 있게 해준다.
• useCallback은 deps 배열에 넣은 값이 변경될 때만 안에 있는 메서드를 새로 정의하고, 변경되지 않으면 이전에 저장해둔 걸 그대로 사용할 것이다.

const cachedFn = useCallback(fn, dependencies)

• deps
  • 배열
• 사실 함수를 선언하는 것은 리소스를 많이 차지하는 작업은 아니다.
• 그렇지만 리렌더링이 될 때마다 새로 만들어지는 것보다 이미 만든 함수를 필요할 때만 사용하는 것은 중요하다.

예시