React Hooks (useMemo)

useMemo는 메모이제이션된 값을 반환한다.

메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

 

useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다.

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

첫번째 인수에는 어떻게 연산할지 정의하는 생성(create)함수, 두번째 인수에는 의존성 값의 배열을 넣어주면 된다.

두번째 인수에 넣어준 배열의 값이 바뀌면 함수를 호출해서 연산해주고, 그렇지 않다면 이전의 값을 재사용하게 된다.

즉, 의존성이 변경되었을 때만 메모이제이션된 값만 다시 계산한다.

 

useMemo는 성능을 최적화할 때 사용한다.

이 최적화는 모든 렌더링 시 고비용 계산을 방지하게 해준다.

 

useEffect와 헷갈릴 수도 있다.

useEffect는 렌더링이 완료된 후에 실행되지만,

useMemo로 전달된 함수는 렌더링 중에 실행된다는 큰 차이점이 있다.

따라서, useMemo를 사용할 때, 렌더링 중에 하지 않는 것을 이 함수 내에서 하면 안된다.

useEffect에서 하는 일과 useMemo에서 하는 일을 구분하자!

 

---

참고

https://ko.reactjs.org/docs/hooks-reference.html#usememo

https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98