[React] 훅(Hook) - useMemo

 

1. 정의

- 컴포넌트가 재렌더링 되면 그 속에 자식 컴포넌트도 항상 함께 재렌더링 됨 -> 자식컴포넌트가 동작이 오래걸리는 무거운 컴포넌트인 경우 부모 컴포넌트를 렌더링 할 때 마다 속도 저하가 발생할 수 있음! 이런 상황에 자식 컴포넌트를 memo로 감싸 놓으면 됨!

-> 재렌더링을 막기위한 훅

 

- 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있는 경우 useMemo에 담아서 사용 할 수 있음

-> 예를 들어 반복문을 10억번 돌려야 하는 경우, 그 함수를 useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행됨

 

- useEffect처럼 dependency도 넣을 수 있기 때문에 특정 state, props가 변할 때만 실행 가능

-> 따라서 useMemo훅에 의존성 배열을 넣지 않는 경우 렌더링이 일어날 때마다 매번 함수가 실행되므로 사용 의미가 없어짐

 

- 의존성 배열에 빈 배열을 넣게 되면 컴포넌트 마운트 시에만 함수 실행

 

 

 

2. 사용 방법

- Memoized value를 리턴하는 훅

- 파라미터로 Memoized value를 생성하는 create 함수와 의존성 배열을 받음

- 의존성 배열에 들어있는 변수가 변한 경우만 새로 create 함수를 호출하여 결과값 반환

const memoizedValue = useMemo(
	() => {
    	// 연산량이 높은 작업을 수행하여 결과 반환
        return computeExpensiveValue(의존성 변수, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);