[React] useMemo

✔️useMemo란?

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

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

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

너무 많이 남용해서 안되는 이유가 의존성 값 비교를 수행해야 하기 때문에 컴포넌트 함수가 재실행되어야 하는 함수가 있다면 성능낭비가 될 수 도 있으므로 주의해야 한다. 

 

리액트에서 함수형 컴포넌트는 렌더링 => 컴포넌트 함수 호출 => 모든 내부 변수 초기화의 순서를 거친다.

 

 1. useMemo의 구조

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

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

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