[React] useMemo

useMemo는 리액트에서 useCallback과 함께 컴포넌트 성능 최적화를 위해 사용되는 대표적인 hook입니다.

useMemo에서 Memo는 Memoization(메모이제이션)을 뜻합니다.

메모이제이션이란..?

간단하게는 이전에 계산한 값을 캐싱해놨다가 필요할 때 꺼내서 사용하는 기법입니다.

자세한 내용은 메모이제이션을 참고하세요.

예를 들어 다음과 같은 코드가 있습니다.

function App() {
	const value = calculate()
	return <div>{value}</div>
}

함수형 컴포넌트의 렌더링 과정은 다음과 같습니다.

App 함수 호출 -> 모든 내부 변수 초기화

여기서 컴포넌트가 렌더링될 때 마다 함수가 계속 호출되고 변수에 담기게 됩니다. 만약 이 함수가 무거운 작업을 하는 함수일 경우에는 이 과정이 매우 비효율적일 수 있습니다.

useMemo를 사용하면 이러한 것을 해결할 수 있습니다.

useMemo를 사용하게 되면 렌더링은 다음과 같은 순서로 작동합니다.

function App() {
    const value = useMemo(() => {
        return calculate()
    })
    return <div>{value}</div>
}

App 함수 호출, 메모이제이션 -> 이후 컴포넌트 리렌더링 -> App 함수 호출, 메모이제이션 된 값을 재사용

계산된 결과 값(value)을 메모리에서 가져와 재사용합니다.

useMemo는 두 개의 인자를 받습니다.

const value = useMemo(()=>{
	return calculate();
}, [item]);

첫 번째 인자로는 Callback 함수를 받고, 두 번째 인자로 배열을 받습니다.

첫 번째 인자인 Callback 함수는 메모이제이션할 값을 반환해주는 함수입니다.

두 번째 인자인 배열은 의존성 배열(dependency array)이라고도 부릅니다. 배열 안의 요소가 업데이트될 때만 콜백함수를 다시 호출해서 메모이제이션 값을 업데이트합니다.

만약 빈 배열이 들어간다면, 컴포넌트가 맨 처음 mount 될 때에만 값을 계산하고 이후에는 메모이제이션된 값을 가져와서 사용합니다.

하지만 useMemo 남용하면 성능 악화를 불러올 수 있습니다.

useMemo를 사용한다는 것은 값을 재활용하기 위해 메모리에 따로 저장해놓는 것을 말합니다.

불필요한 값까지 메모이제이션하면 오히려 성능이 악화될 수 있기 때문에 정말 필요할 때만 적절하게 사용해야 합니다.