React - useMemo

1. 개요

컴포넌트를 사용하다보면 불필요하게 계속 리렌더링 되는 순간들이 있다. 

이러한 것들을 해결해 주는 것이 useMemo다.

 

useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.

 

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

 

쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.

 

2. 사용 방법

import { useMemo } from "react";

리액트의 기능이기 때문에 선언을 해준다. 

 

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

1. 내가 최적화 하고 싶은 함수밖에 useMemo함수를 덮어 씌운다.

2. DependencyArray값이 바뀔 때만 useMemo의 콜벡함수가 실행된다.

 

useMemo는 useEffect처럼 첫 번째 인자로 콜백 함수, 두 번째 인자로 의존성 배열(dependancyArray)을 받는다.

의존성 배열 안에있는 값이 업데이트 될 때에만 콜백 함수를 다시 호출하여 메모리에 저장된 값을 업데이트 해준다.

만약 빈 배열을 넣는다면 useEffect와 마찬가지로 마운트 될 때에만 값을 계산하고 그 이후론 계속 memoization된 값을 꺼내와 사용한다.