[React.js] 성능개선 2 : 재렌더링을 막는 memo, useMemo

❗ Memo

useMemo와 memo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나이다.

Memo는 Memoization을 뜻한다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

 

먼저 시작하기 전에 함수형 컴포넌트에 대해 꼭 알아야 한다. 아래 예제를 보면서 같이 살펴보겠다.

함수형 컴포넌트는 렌더링 ➡️ Component 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다.

Component가 렌더링이 될 때마다 value라는 변수가 초기화된다. 따라서 calculate 함수는 반복적으로 호출됩니다. calculate 함수가 무거운 일을 하는 함수라면  무거운 일을 반복적으로 하니 굉장히 비효율적이다.

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

function calculate() {
    return 10;
}

useMemo를 사용하면 렌더링 ➡️ Component 함수 호출 ➡️ Memoize된 함수를 재사용하는 동작 순서를 거친다. useMemo를 사용해서 memoization을 해주면 calculate 함수를 반복적으로 실행할 필요 없다.

useMemo는 처음에 계산된 결괏값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링이 되어도 계속 calculate를 다시 호출하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와서 재사용할 수 있게 해준다.

 

useMemo는 첫 번째 인자로 콜백 함수를, 두 번째 인자로 의존성 배열을 받는다.

두 번째 인자인 배열의 요소 값이 업데이트될 때만 콜백 함수를 다시 호출해서 memoization 된 값을 업데이트 해줘서 다시 memoization을 해준다. 만약에 빈 배열( [ ] )을 넘겨주면 맨 처음 컴포넌트가 마운트 되었을 때만 값을 계산하고 이후에는 항상 memoization된 값을 꺼내 와서 사용한다.

// 첫 번째 인자 콜백함수 
// 두 번째 인자 의존성배열
const value = useMemo(() => {
    return calculate();
},[item])

 

❗ Memo의 문제점

1. memo는 렌더링 시 기존 props와 신규 props가 동일한지 항상 비교를 해야하는데 props가 크고 복잡하면 이거 자체로도 부담이 될 수도 있다는 문제점이 있다.

2. memo는 값을 재활용하기 위해 따로 메모리를 소비해서 저장을 해놓는 것이다. 그렇기 때문에 불필요한 값을 모두 Memoization 해버리면 성능이 안 좋아질 수 있기 때문에 필요할 때만 사용해야한다.

---

❗useMemo

import {useMemo, useState} from 'react'

function ContFunc(){
  return 반복문10억번돌린결과
}

function Cart(){ 

	ContFunc() // useMemo 적용 전
	let result = useMemo(()=>{ return ContFunc() }, []) // useMemo 적용 후

  return (
    <Child />
    <button onClick={()=>{ setCount(count+1) }}> + </button>
  )
}

어느 컴포넌트에서 반복문을 10억번 도는 함수가 있다치자 

그리고 그 함수는 메인 함수에서 랜더링 할 때 마다 호출된다고 하면 정말 크나큰 문제가 발생할 것 이다.

이 때 사용가능한 Hook이 바로 useMemo이다.

사용 방법은 위에서 보여지는대로 적용하여 사용하면 된다.

 

let result = useMemo(()=>{ return ContFunc() }, [])

만약 이렇게 사용한다면 컴포넌트 로드 시 최초 1회만 실행이 된다.

그럼 재렌더링마다 동작을 안하니 비교적 효율적으로 동작할 수 있을것이다.

해당 코드를 보면 이미 눈치챈 사람도 있을수도 있는데 useEffect와 사용 방법이 매우 흡사하다

useMemo는 useEffect와 동일하게 dependenct를 넣어 특정 state, props가 변할 때만 실행할수도 있다.

 

 

🤞 useEffect 참조.

https://growing-jiwoo.tistory.com/57

[React.js] useEffect에 대하여

 

❗ memo와 useMemo의 차이

memo는 html 렌더링이 완료되고 실행되는것이고

useMemo는 렌더링이 될 때 실행이 되는것이다.

단순히 실행 시점에 대한 차이가 있으니 해당 차이점을 숙지하여 사용하자.