useMemo hook

useMemo란?
React에서 성능 최적화를 위해 사용되는 hook중 하나로, 이전에 계산된 함수호출 결과값을 메모제이션(memoization) 하여 불필요한 계산을 방지하여 렌더링성능(불필요한 렌더링 방지)을 향상시킨다

메모제이션(memooization): 이전에 계산된 값을 캐싱하여 동일한 입력에 대해 다시 계산을 수행하지않고 저장된 값을 반환

 

useMemo 왜 사용해야 할까?

React의 함수형 컴포넌트는 해당 컴포넌트가 렌더링될 때마다 모든 내부 변수 및 함수가 초기화되기 때문에, 컴포넌트 내부에서 무거운 작업을 하여 값을 반환하는 함수가 있을때, 자주 변경되지않는 값이 렌더링마다 해당 함수를 호출하여 값을 반환하는것은 무의미한 반복 작업이다. useMemo는 이전에 계산된 결과값을 메모리에서꺼내와서 재사용 할 수 있도록 해주어 성능을 향상시킨다.

useMemo 구문

• useMemo(memooizationFunctuin,[dependencies])
  • memooizationFunctuin: 메모제이션할 값을 계산하는 함수
  • dependencies: 의존성배열
    • [빈배열]: 최초 렌더링시에 한번만 계산
    • [의존성값]: 의존성값이 변경될때마다 새로운값을 계산

useMemo 동작방식

• 마운트(mount): 컴포넌트가 최초로 화면에 나타날때 useMemo의 첫 번째 매개변수로 전달된 함수가 실행되고, 해당결과가 캐시된다.
• 언마운트(Unmount): 컴포넌트가 화면에서 사라질때, useMemo에서 캐시된 값은 사라진다.
• 업데이트(Update): 컴포넌트가 리렌더링될때, 의존성 배열에 있는 값이 변경되었다면 useMemo에서 캐시된 값을 업데이트하고, 변경된값이 없다면 이전에 캐시된 값을 재사용한다.

useMemo 사용법

- 오래걸리는 작업에 대한 사용법

hardResult함수를 useMemo사용 했을때와 사용 하지 않았을때를 비교하기위해선 "적게걸리는 계산기"의 값을 변경시켯을때 상태변경의 시간의 차이로 느껴볼수 있다. useMemo를 사용하지않은 hardcalculator를 사용할때는, easycalculator의 state의 값이 변경될때마다 hardcalculator함수를 호출하여 시간이 걸리는 작업을 계속해서 작업해야한다. 하지만 useMemo를 사용한다면 메모리에 저장된값을 재사용하기 때문에 easycalculator의 상태값을 변경하여도 hardcalculator의 함수결과는 동일하기 때문에 계산을하지 않고 이전값을 캐싱한다.

https://stackblitz.com/edit/stackblitz-starters-cowbk9?file=src%2FApp.tsx

 

- Object  대한 사용법

예시를 들경우) 해당코드에서는 이름,나이,성별의 상태가 변경한다면 컴포넌트는 당연히 리렌더링이 발생한다. 하지만 성별을 변경하였을때만 useEffect가 동작하는지 이해한다면 react를 제대로 이해하고 있다본다. 설명하자면 useEffect의 의존성배열은 원시타입이 아닌 참조타입을 의존성 배열로 할당할경우 useEffect는 참조타입에 대해서 얕은복사를 진행하고, 값이아닌 참조주소를 참고한다. 참조주소가 변경된다면 useEffect가 참고하는 의존성배열이 변경되었다고 판단하여 useEffect가 실행되는것이다. 그렇다면 의문을 가지게될것이다. 컴포넌트는 렌더링이 발생할때마다 객체에대한 참조주소가 변경이된다. 그렇다면 이름,나이를 변경하면 객체의 참조주소가 변경되어야 하지만 이를 useMemo가 이전값을 캐싱하여 똑같은 참조주소를 바라보고 있기때문에 useEffect는 성별에 대한 값이 변경되지 않았다고 판단하여 useEffect를 실행하지 않는것이다. 그렇기에 성별의 값이 변경되었을때는 useMemo의 의존성배열에 업데이트시 다시 계산할수 있도록 값을 넣어주어 메모제이션을 다시진행 할수 있도록 하는것이다.

https://stackblitz.com/edit/stackblitz-starters-hkgbec?file=src%2FApp.tsx

 

useMemo 주의사항

- 최상위 레벨 호출: useEffect 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

- 호출의 위치: useEffect를 호출할때는 조건문이나 반복문안에서 hook을 호출할 수 없다.

- Custom Hook: 일반함수가 아닌 use접두사가 붙은 자체훅에서 사용할수 있다.

- 쓸모없는 메모제이션: 계산비용이적고, 값이자주 변경되어야 하는경우에는 사용하지 않는것이 좋다

- 함수의 결과: 함수의 결과가 항상 다른경우에는 사용하지 않는것이 좋다.

useMemo 참고문서

useMemo – React

설명을 아주 잘해준다. 그래서 구독했다.