📚 Reference

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

📜 Chapter

useMemo

useEvent

useEffect

‣

useCallback

• useCallback
• 특정 함수를 새로 만들지 않고 재 사용하고 싶을 때 사용한다.
• 함수의 결과 값을 기록하는 것이 아니라 함수 자체를 기록한다.
• useCallback은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수이다.
• 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재 사용할 수 있게 해준다.
• useCallback은 deps 배열에 넣은 값이 변경될 때만 안에 있는 메서드를 새로 정의하고, 변경되지 않으면 이전에 저장해둔 걸 그대로 사용할 것이다.

const memoizedCallback = useCallback(함수, deps);

• deps
  • 배열
• 사실 함수를 선언하는 것은 리소스를 많이 차지하는 작업은 아니다.
• 그렇지만 리렌더링이 될 때마다 새로 만들어지는 것보다 이미 만든 함수를 필요할 때만 사용하는 것은 중요하다.
• 이런 것들 하나씩 아껴서 빠르고 강력한 UX가 탄생하는 것이다.
• 자원을 최소한으로 사용하는 것을 항상 목표로 두고 공부를 해보자.
• 개발자가 계속해서 공부하는 가장 큰 이유이기도 하다.
• useCallback은 선언한다고 바로 적용되지 않는다. 늘 React.memo를 사용하는 것을 잊지 말자. 그리고 의존성 배열을 충분히 관리 해줘야 한다. 대충 하고 넘어가면 시간만 낭비한 걸지도 모른다. 그리고 React.memo를 렌더링 방지의 목적으로 사용하지 말자. 버그 날 수 있다.