리액트 개발을 하다보면 useMemo, useCallback 이 두 가지 훅 사용에 대한 혼란을 겪을때가 있다.
이 포스팅은 이 훅들에 대해 정확히 알아 이 혼란을 줄이기 위해 번역하였다.
썸네일 제너레이터 - Thumbnail Generator
useMemo
useMemo의 기능은 렌더링 사이에서 계산된 값을 기억 하는 것이다.
리액트가 하는 주된 일은 UI를 어플리케이션 상태와 동기화 하는 것이고 이를 수행하는데 사용하는 도구가 리렌더링 이다.
각 리렌더링은 상태를 기반으로 하여 주어진 순간에 어플리케이션의 UI가 어떻게 보여야 하는지에 대한 스냅샷(*) 찍는다.
*스냅샷 : 사진으로 비유하자면 각 사진은 모든 상태 변수에 대해 특정 값이 주어졌을 때, 사물이 어떻게 보이는지 포착하는 것
각 리렌더링은 현재 상태를 기반으로 DOM이 어떻게 생겼는지에 대한 그림을 생성한다.
어떤 DOM 노드를 변경해야 하는지 리액트는 직접적으로 알려주지 않지만 리액트에 현재 상태를 기반으로 변경해야 하는 UI를 알려준다. 리렌더링을 통해 리액트는 스냅샷을 생성하고 틀린 그림 찾기 게임을 하는 것과 같이 스냅샷을 비교하여 변경해야할 사항을 파악한다. 리액트는 최적화 작업이 이미 많이 되어 있기 때문에 리렌더링하는 것은 큰 문제가 아니다. 특정 상황에서는 이 스냅샷을 만드는데 시간이 걸릴 수 있고 이로 인해 사용자가 작업을 수행한 후 UI가 충분히 빨리 업데이트되지 않는 것과 같은 성능 문제가 발생할 수 있다.
useMemo와 useCallback은 리 렌더링을 최적화 하는데 도움이 되도록 구현된 코드이다. 이 두 훅을 사용함으로서 얻는 이점은 주어진 렌더에서 수행해야하는 작업의 양을 줄여주고 컴포넌트가 다시 렌더링 해야하는 횟수를 줄여준다.
-
사용사례) 무거운 계산 로직
자바스크립트에서는 하나의 메인스레드만 가지고 있기 때문에 매 초마다 무거운 계산 로직을 재계산 하는 것은 성능 저하를 불러온다. 이럴때 useMemo를 사용할 수 있다. useMemo로 감싸진 무거운 계산 로직은 마운트하는 동안 컴포넌트가 처음으로 렌더링 될 때 호출되어 계산이 이루어 진다. useMemo는 본질적으로 작은 캐시와 같으며 종속성(Dependency)은 캐시 무효화 전략이다. 종속성(Dependency)에 들어가는 값이 변경될 때에만 무거운 계산 로직을 다시 계산하게 되는 것이다.
컴포넌트가 다른 이유로 리렌더링 되는 경우 useMemo는 함수를 무시하고 캐시된 값을 전달한다.
이러한 것을 일반적으로 메모이제이션(Memoization)이라고 하고 이 훅이 곧 useMemo이다.
useMemo를 사용하지 않고도 처리하리 할 수 있는 방법은
컴포넌트를 분리하여 한 컴포넌트에서 리렌더링해도 다른 컴포넌트에 영향을 주지 않도록 설계하는 것이다.
-
useCallback
useMemo와 정확하게 같은 내용이지만 배열/객체 대신 함수용으로 사용한다.
배열 및 객체와 유사하게 함수도 값이 아닌 참조로 비교된다.
-
언제 사용해야 하는가?
모든 단일 개체, 배열, 함수에 이 훅들로 래핑하는 것은 시간 낭비이며 앱 성능이 느려지는 것을 발견하고 리액트 프로파일러를 사용하여 느린 렌더링을 추적하며 성능을 개선시킬 수 있다. 어떤 경우에는 어플리케이션을 재구성하여 성능을 향상 시킬 수 있다. 이 처럼 다양한 방법으로 성능 최적화를 시도해보는 것 처럼 이 훅들을 하나의 방법으로 시도해보는 것이 좋다. 무조건적인 useMemo, useCallback 사용은 되려 성능 저하를 발생시킬 수 있다.
이런 경우 사용하면 좋다)
- Custom Hook의 State 변경 로직에서 useCallback 사용
- Context API Provider에서 State 값에 useMemo 사용
-
앞으로의 리액트
리액트 팀은 컴파일 단계에서 코드를 자동 메모화 할 수 있는지 여부를 검토중에 있으며 아직 연구 단계이지만 유망해 보인다.
미래에는 이 모든 작업이 자동으로 수행될 수 있겠지만 아직까지는 우리가 스스로 최적화 작업을 진행해야 한다.
-
참고 문서
Understanding useMemo and useCallback
https://www.joshwcomeau.com/react/usememo-and-usecallback/
[번역] useMemo 그리고 useCallback 이해하기
'Front > React' 카테고리의 다른 글
| 코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) (0) | 2022.09.28 |
|---|---|
| Hydrate 이해하기 (0) | 2021.10.20 |
| [React] Create-react-app 없이 Webpack, Babel 빌드 해보기 (4) | 2021.04.22 |
| React Hook 이해하기 - useEffect (Effect Hook) (0) | 2020.05.25 |
| React Hook 이해하기 - useState (State Hook) (0) | 2020.05.25 |
댓글