React 앱 성능 최적화 3 - React.memo

목차

• 최적화 방법
• React.memo와 메모이제이션
• 실제 사용
• React.memo를 지양해야 하는 상황
• 결론

 

최적화 방법

 

React 앱을 최적화하는 데 사용하는 방법은 크게 네 가지가 있다.

 

첫 번째가 React.memo

 

두 번째로, useCallback

 

세 번째로, useMemo

 

네 번째로, 얕은 비교 (shallow compare)

 

React.memo, useMemo는 메모이제이션을 활용한 최적화 방법이다.

 

React.memo와 메모이제이션

 

메모이제이션이란 계산 결과를 메모리에 저장해 두고, 같은 연산에 대한 계산 결과를 요구할 때 재계산하지 않고 메모리에 저장된 값을 불러와 사용하는 방식을 말한다.

 

React.memo로 감싸진 컴포넌트는 같은 props가 전달되면 리렌더링 없이 메모리에 저장된 컴포넌트를 불러와 재사용한다.

 

이를 통해 불필요한 리렌더링을 줄여 성능 최적화가 가능하다.

 

 

실제 사용

 

개발중인 프로젝트 'Korea Crime Graph'에 적용해 보자.

 

우선 React.memo 적용하지 않았을 때 렌더링 시간을 기록하자.

 

React.memo 적용 전

 

렌더링 시간

 

 

약 4.5ms가 소요되었다.

 

 

React.memo 적용 후

 

일단은 모든 컴포넌트에 React.memo를 적용하였다. 적용 방식은 모듈로 컴포넌트를 내보낼때 React.memo로 감싸주면 된다.

 

function Button ({text, click}) {
  return (
    <button className='btn' onClick= {click}>
      {text}
    </button>
  )
}

export default React.memo(Button);

 

다시 렌더링을 시도해보자

 

 

첫 렌더링 시간

 

 

4.8ms로 React.memo 적용전과 큰 차이가 존재하지 않는다.

 

하지만 다시 같은 컴포넌트를 호출하면

 

두 번째 렌더링 시간

 

 

1.5ms로 줄어드는것을 볼 수 있다.

 

 

 

React Memo를 지양해야하는 상황

 

메모이제이션으로 리렌더링을 줄일 수 있는 React Memo를 가능하면 사용하지 않는게 좋은 상황도 있다. 렌더링 될때 props가 대부분 다른 경우, React.Memo로 컴포넌트들 감싸지 않는것이 낫다.

 

React.memo로 감싼 컴포넌트가 리렌더링될때 다음 두 가지 작업을 수행합니다.

 

1. 이전 props와 새로 전달된 props를 비교한다.

 

2. 대부분 이전과 다른 props가 전달되기 때문에 React는 이전 렌더링 내용과 다음 렌더링 내용을 비교한다.

 

만약 렌더링 될때마다 props가 다르다면 React.memo 사용을 지양하자.

 

 

결론

 

React.memo로 리렌더링 횟수를 줄여 성능 최적화가 가능하다. 하지만 React.memo 사용이 항상 좋은것은 아니기 때문에 profiler로 성능상 이점이 있는지 확인 후 사용하도록 하자.