오늘은 리액트에서 useMemo와 비슷한 역할을 하는 useCallback 훅에 대해서 더 자세히 공부하고 기록해보려 한다.
1. useCallback
useCallback 또한 useMemo와 같이 momoization 기법으로 컴포넌트 성능 최적화를 위한 훅으로 사용된다.
다른점은 useMemo는 인자로 콜백함수를 넣으면 함수가 리턴하는 값을 memoization 해주는 것이고, useCallback은 인자로 콜백함수를 넣으면 콜백 함수 자체를 momoization하는 것이다.
2. 예제
위 코드에서 input 값이 바뀌면 노란 박스의 사이즈가 바뀌고, useEffect의 "사이즈 변경" 호출되는 것을 확인할 수 있다. 하지만 변경을 눌러 배경 색상을 바꿀 때도 useEffect가 호출되는 문제가 발생한다.
useMemo에서와 같이 isRed의 상태값이 바뀌면 컴포넌트가 재호출되면서 useEffect가 호출되는 것이다.
이러한 불필요한 호출을 방지하기 위해 여기서는 Box의 사이즈를 변경해주는 changeBoxSize 함수를 useCallback으로 감싸주는 것이다.
위 코드에서 주석 처리된 부분을 비교해보면 콘솔창을 통해 차이를 확인할 수 있다.
(코드는 좌측바 드래그를 통해 확인)
3. 다음은!
다음은 useMemo와 useCallback에 대해서 공부하면서 어떤 차이점을 가지고 있고, 언제 어느 상황에서 어떤 hook을 쓰는 것이 적절한지 등을 정리해보면 좋을 것 같다는 생각이 들었다.
좀 더 공부하고 정리한 뒤에 기록해 두어야겠다.
