useMemo / useCallback

컴포넌트가 리렌더될 때마다 재계산이 되는데 재계산을 방지함으로써 성능 개선을 얻을 수 있는 useMemo 와 useCallback Hooks

useMemo

• 변수에 종속성을 주어 함수의 재연산 방지
  • 변수값을 캐시해서 재연산 방지

useCallback

• 함수에 종속성을 준다.
  • 함수를 캐시해서 재연산 방지

종속성을 준다?

• 메모리에 값을 저장 시켜 재사용 한다.
• 캐시하여 최적화 시킨다

캐싱

• 캐시는 잠시 저장해둔다는 의미
• 캐시 메모리라고 하면 실제 메모리와 CPU 사이에서 빠르게 전달을 위해서 미리 데이터들을 저장해두는 좀 더 빠른 메모리
• 서버 또는 캐시 메모리 등 캐시가 붙은 기능에 저장된 데이터는 지워질 수 있다는 것을 전제로 한다. 영구적 메모리 공간이 아니다. 언제든 지워질 수 있다.

그렇다면 useMemo와 useCallback을 쓰면 무조건적인 성능 개선인가?

• 아니다, 트레이드 오프가 있다.
• 성능이 좋고 빠르다는 의미는 어딘가에 저장해놨다는 뜻이고 즉 메모리를 사용한다는 의미다.
• useMemo와 useCallback 또한 값의 변화를 비교하게 되며, 배열을 생성하여 사용하는 만큼 메모리를 사용하게 된다. 이러한 비용이 재연산하는 비용보다 클 수 있다.그런 경우에는 훅스를 사용하는 것이 성능에 더 안좋을 수 있다.
• 메모리를 사용하는 비용 VS 재연산하는 비용을 적절하게 고려해야한다.
  • 예를들어 함수에 들어있는 알고리즘이 너무 복잡하여 렌더링 될 때까지 많은 시간을 잡아먹는 경우 캐싱 메모리를 활용하면 성능 개선이 될 수 있다.

결론

• useMemo, useCallback은 결국 변수에 있는 값을 캐시화 시켜놓는거다.
• 리액트 컴포넌트는 여러 이유로 리렌더링이 되는데 렌더링이 된다는건 컴포넌트(함수)를 재호출 하기 때문에 결국 모든 변수값이 초기화 된다는 이야기이다. 그래서 useMemo, useCallback을 꼭 필요한 경우에 사용한다.