[React Hook] useMemo를 알아보자

메모이제이션 useMemo

맨 처음 계산한 값을 메모리에 저장(캐싱)해서, 필요할때 꺼내서 쓴다.
함수로써의 기능도 충분히 가능하지만, useMemo의 의도된 설계가 아니며 지연된 연산을 통해 "값"을 기억하는 게 주된 목적이다.

useMemo는 인자를 전달할수없다. (함수의 응답값을 메모할 필요가 없는것이고, 리액트의 useMemo 설계 의도와 어긋난다)
매개변수로 하여금 값을 뽑아내고 싶다면, useCallback 훅을 사용한다. 하지만 이 함수의 응답은 memoize될 수 없다.

* 함수는 렌더링이되면 모든 내부변수가 초기화되고, 재할당 과정을 거친다.
* 함수형 컴포넌트또한 함수이므로 재렌더링 시 컴포넌트 내 선언된 변수가 초기화되는 과정을 거친다.
* state가 변경되면, 함수는 재랜더링 되고, 선언된 변수는 모두 다시 초기화 된다.

 

언제 쓰는게 좋을까?

1. 종속성 중 하나가 변경된 경우에만 수행하려는 비싼 계산 과정을 거쳐야 할 때, useMemo를 사용한다.

const [user, setUser] = useState();
const [vip, setVip] = useState();

const calculateUserPoint = (user) => {//point를 반환하는 간단한 로직}
const calculateVipPoint = (vip) => {//point를 반환하는 복잡한 로직}

const userPoint = calculateUserPoint(user) // 간단한 로직은 메모이제이션 하지않음
const vipPoint = useMemo(() => { // 복잡한 로직 계산값을 메모이제이션하여 할당
    return calculateVipPoint(vip); // vip값이 변경될때에만 calculateVipPoint함수를 실행하여 값을 재할당
  }, [vip]);

 

2. 원시타입이 아닌 객체타입 값을 가지고있는 변수는, 재랜더링 시 초기화 과정을 거쳐 레퍼런스 주소값이 바뀐다.
따라서 useEffect 내 의존성배열에 추가해도, 언제나 값이 바뀌었다고 판단하기때문에 재렌더링 되어 useEffect내에 선언된 함수를 실행시킨다. 이때 useMemo를 사용하여 값을 메모이제이션 해주는게 좋다. **

 

언제 useCallback을 쓰고, 언제 useMemo를 써야할까?

- 종속성 중 하나가 변경된 경우에만 수행하려는 비싼 계산 과정을 거쳐야 할 때, useMemo를 사용한다.
- 하위 구성 요소에 props로 전달할 매개변수가 있고, 상위 컴포넌트가 재렌더링될 때마다 새 함수 개체를 생성하지 않으려 할때 useCallback을 사용한다.

- 리랜더링이 자주 일어나지 않는다면 둘 다 사용하지 않는편이 낫다.
- props나 state가 자주 변경될때는 비교할 필요가 없으므로 사용하지 않는 편이 낫다.