해당 내용은 https://www.udemy.com/course/best-react/ 강의를 들으며 정리하고 스스로 공부 한 내용을 기록 하였습니다.
About useMemo()
useMemo는 함수형 컴포넌트에서 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅 이다.
해당 훅 또한 저장 을 한다는 점에 주목하자. 값을 재활용 하기 위해 따로 메모리를 소비해서 저장한다. 따라서 필요한 때에만 해당 훅을 사용하는 것이 좋다.
const cachedValue = useMemo(calculateValue, [dependencies])useMemo() 의 첫 번째 인자에 함수가 들어가게 되는데, 이 함수를 기억하는 것이 아니라 저장 하고 싶은 것, 값 을 반환 할 것이다.
두 번째 인자에는 useCallback 과 마찬가지로 의존성 배열이 들어간다. 이 의존성 배열을 통해 저장된 값에 변경 사항이 생길 때 마다 업데이트 된다.
초기 렌더링 시에는, useMemo를 통해 얻는 값은 계산 함수를 호출한 결과 값이 나오게 된다.
그 이후 모든 렌더링에서 React는 이전 렌더링에서 전달한 의존성과 현재의 의존성을 비교 한뒤 변경되지 않았다면 이전에 계산 했던 값을 반환하고, 변경이 되었다면 계산을 다시 실행하고 새로운 값을 반환한다.
예를 들어, 값이 변경되고 새로운 값이 추가 될 때 재 정렬을 하고 싶다면
const sortedList = useMemo(() => {
return items.sort((a, b) => a - b);
}, [items]);해당 예시와 같이 작성할 수 있다.
이 useMemo 훅은 useCallback 에 비해 사용 빈도는 낮을 것 이다.
함수를 기억 하는 것이 훨씬 더 도움이 되고 데이터를 기억 할 일 보다는 빈도수가 많을 것 이기 때문이다.
useMemo 를 사용해 데이터를 저장하는 것은 메모리를 사용하는 것이기 때문에 사용하는 모든 값 마다 계속 사용하는 것은 오히려 성능을 해칠 수 있다.
React.memo & useMemo & useCallback
이 셋은 다르면서도 묘하게 같은 부분이 있다. 바로 메모이제이션(Memoization) 이라는 특징을 가지고 있다.
Memoization
연산의 결과 값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용 하는 기법
React.memo( component... )React.memo 는 props 의 값으로 변경을 확인 한다.
한 컴포넌트를 같은 프로퍼티로 리렌더링 하는 경우가 빈번할 때 사용한다.
useCallback, useMemo 훅과 다르게 클래스 컴포넌트와 함수형 컴포넌트 둘 다 쓰일 수 있다.
useCallback (() => {...fn}, [dep]}useCallback 은 [dep] 내부 값 으로 변경 사항을 확인 하며 함수 자체를 캐싱 한다.
의존성 값이 변경되지 않았다면 이전에 생성한 함수의 참조 값을 반환하여 사용 할 수 있다.
함수형 컴포넌트에만 사용이 가능하다.
useMemo(() => {...return value}, [dep])useMemo 는 [dep] 내부 값으로 변경 사항을 확인 하며 값 자체를 캐싱 한다.
의존성 값이 변경되지 않았다면 이전에 메모이제이션 한 값을 가져온다.
모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적을 가지고 있지만, 남용하게 된다면 오히려 성능을 해칠 수 있으니 주의하자.
