Hook을 사용하여 개발을 한지 어느정도 지나고, 사용하는 것이 손에 익었을 때 알게 모르게 잊고 있었던 useMemo와 useCallback이 생각났다. 솔직히 useState와 useEffect만으로도 충분히 만들 수 있다고 생각해서 계속해서 미뤘던 것 같다.
하지만 더이상 미루면 안되겠다 싶어서 언제 사용하는지, 왜 사용하는지, 어떤 점이 좋은지 파악해보려한다.
일단 useState와 useEffect를 사용할 때 제대로 조건을 설정해주지 않으면 같은 값이거나 같은 함수인데 리렌더링으로 성능을 저하시키는 것을 발견할 수 있다.
이럴 때! 사용하는 것이 useMemo와 useCallback이다.
React 공식 홈페이지에 보면 아래와 같은 글이 적혀있다.
useMemo는 성능 최적화를 위해 사용할 수는 있지만 의미상으로 보장이 있다고 생각하지는 마세요. 가까운 미래에 React에서는, 이전 메모이제이션된 값들의 일부를 “잊어버리고” 다음 렌더링 시에 그것들을 재계산하는 방향을 택할지도 모르겠습니다.
없어질 건데 알아야 되나 라는 생각이 들 수도 있겠지만 일단 정리할 생각이다.
useMemo란?
공식 홈페이지에서는 위와 같이 설명하고 있다.
배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 될 것입니다.
useMemo에 대해 정리하자면,
- useMemo로 전달된 함수는 렌더링 중에 실행된다. 따라서 렌더링 중에 할 필요가 없는 것을 넣으면 안된다. (useEffect에서 할 일들)
- 마지막에 선언된 의존성 배열에 있는 값들이 변경될 때만 동작한다.
따라서 불필요한 리렌더링을 막을 수 있어서 성능개선에 도움이 된다.
useCallback이란?
공식 홈페이지에 나와있는 것을 보면 useMemo와 비슷하게 메모이제이션 된 콜백을 반환한다고 나와있다.
useCallback과 useMemo의 차이를 알면 금방 이해가 될 것이다.
차이점을 간단하게 설명하자면,
// useCallback
useCallback(fn, deps)
// useMemo
useMemo(() => fn, deps)위에 표현한 것처럼 useCallback은 useMemo의 형태로 바꿀 수 있다.
위와 같은 특징을 알고 있다면 충분히 프로그램에 적용할 수 있을 것이다.
의외로 간단하게 정리할 수 있는 부분이었다.
글로만 봐서는 알수가 없을 수도 있는데, 한번쯤 테스트 삼아 코드를 짜보는 것을 추천한다. useMemo이나 useCallback 에 선언된 함수가 간단한 계산을 포함한 거라면 성능 개선에 아주 미미하겠지만, 복잡한 계산을 하는 함수라면 성능 개선에 도움이 될 것 이다.
이상 끝!
