오늘은 React의 많은 Hook 중에 렌더링 최적화를 위해 주로 사용하는 useMemo에 대해 알아보자

React의 렌더링

리액트는 기본적으로 부모 컴포넌트의 state / props 가 변경될때 마다 Rerendering 이 된다

하지만 컴포넌트의 state / props가 하나밖에 없는경우는 찾아보기 힘들다, 그렇다면 state / props가 여러개일때 그 중 하나가 변경되면 나머지 state도 재계산을 해야하는데 이 것은 효율적이지 않을것이다(심지어 복잡하고 무거운 계산일수록 더더욱)

이럴때 사용하는 것이 useMemo !

useMemo ?

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

리액트 공식설명을 찾아보면

메모이제이션된 값을 반환합니다 라고 되어있다

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

즉 useMemo는 처음에 계산된 값을 저장해서 리렌더링이 되어도 이전에 계산된 값을 메모리에서 꺼내오는 것 이다.
의존성 배열이 변경되었을 때 메모이제이션 된 값만 다시 계산한다

주의사항

• useMemo로 전달된 함수는 렌더링 중에 실행된다, 따라서 통상적으로 렌더링 중에 하면 안되는 일들을 이 함수 내에서 하면안된다 예를 들어 SideEffect 의 처리는 useEffect로 처리 하듯이 말이다

• useMemo는 메모리를 차지하기 때문에 복잡하고 무거운 계산을 할 경우 추천되며 이 경우 성능상 큰 이점이 있다