[React] useMemo

 

---

 

 

 

◽ useMemo의 형태

useMemo( param1 callbackFn, param2 [의존성 배열] )

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

• 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hook이다. useMemo는 처음에 계산된 결과값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되더라도 계속 같은 함수를 호출하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와서 재사용한다.
• 렌더링 중에 실행되기 때문에 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하면 안된다. 예를 들어, 사이드 이펙트(Side Effect)에서 하는 일을 useMemo에 적지 않도록 한다.
• 첫번째 인자로는 콜백 함수를, 두번째 인자로 의존성 배열을 받는다. 두번째 인자인 배열의 요소 값이 업데이트 될 때만 콜백 함수를 다시 호출하여 memoization 된 값을 업데이트해주어 memoization한다.
• 두번째 인자를 빈 배열([])로 넘겨주면 맨 처음 컴포넌트가 마운트 되었을 때만 값을 계산하고 이후에는 항상 memoization된 값을 꺼내와 사용한다.
• 값을 재활용하기 위해 따로 메모리를 소비하여 저장해놓는 것이기 때문에 성능에 영향을 미칠 수 있으므로 꼭 필요할 때만 사용해야 한다.
• Object는 원시타입과 달리 주소값으로 저장이 되기 때문에 값의 형태는 같아보여도 메모리 상의 주소가 완전히 달라 변경이 되었다고 본다. Object 타입 사용 시 주의해야한다.

 

 

 

◽ useMemo 사용하기

let result = testFunc() // 재렌더링 될 때 마다 함수가 실행된다.
useMemo(() => { return testFunc() }) // 컴포넌트 렌더링 시 매번 실행된다.
useMemo(() => { return testFunc() }, [])
useMemo(() => { return testFunc() }, [변수]) // 이렇게 state나 props 변수를 지정할 수도 있다.

 

 

 

◽ 함수형 컴포넌트가 렌더링 하는 과정과 useMemo

[함수형 컴포넌트가 렌더링 하는 과정]

- 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화

- Component가 렌더링 될때마다 calculate 함수가 실행되며 value는 초기화 된다.

function calculate() {
    // 로직..
    return result;
}

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

 

[useMemo를 사용하여 렌더링 하는 과정]

- 렌더링 → Component 함수 호출 → Memoize된 함수를 재사용

function calculate() {
    // 로직..
    return result;
}

function Component() {
    const value = useMemo(() => {
        return calculate();
    }, [item])
    
    return <div>{value}</div> 
}

 

 

 

---

 

 

 

참고 및 출처

[React] useMemo 사용법 및 예제

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.