김민태의 데브캠프 2기 - 리액트 프로파일러로 성능 비교하기 2

저번 시간에 

출처 : 김민태의 데브캠프 온라인 강의

위 사진을 통해 여러 컴포넌트로 나눈 B.js가 A.js보다 성능이 낮음을 확인할 수 있었는데, 이번엔 React.memo를 사용하여 성능을 향상시키고자 한다.

 

우선 개발자모드에서 Profiler를 Components로 바꾸고 Highligt에 체크한다.

 

 

hello를 입력해보면, 

 

 

A 컴포넌트는 하나만 랜더링이 되는 반면, B 컴포넌트는 매우 여러개의 컴포넌트가 랜더링된다.

 

 

문제점은 ? 

app과 타이핑 되는 부분, 이것을 나타내는 부분만 랜더링되길 원한다.

 

해결 방법은?

React.memo를 적용한다.

 

우선 React.memo에 대해 알아보자

React.memo()란?

React는 먼저 컴포넌트를 랜더링 한 뒤, 이전에 랜더링 된 결과와 비교하여 변경된 내용만 Real Dom에 업데이트 한다.
이 과정에서 만약 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트를 랜더링하고 결과를 
메모이징(Memoizing)한다. 
그리고 다음 랜더링이 일어날 때 랜더링하는 컴포넌트의 props가 같다면, React는 메모이징의 내용을 재사용한다.

 

 

적용 방법은. .

const Message = React.memo(({message}) => {
  return <p>{message}</p>
})

 

이런식으로 React.memo로 감싸주면 된다.

 

 

실행 결과를 보면, 타이핑을 내용을 나타내는 부분만 랜더링 되는 것을 확인할 수 있다.

 

 

React.memo가 props를 비교하는 방법에 대해 다음에 알아보고 우선 비교 방식 수정하기에 대해 알아보자

 

const Message = React.memo(({message}) => {
  return <p>{message}</p>
}, compareFunction(prevProps, nextProps));

function compareFunction(prevProps, nextprops){
  return (
    prevProps.a === nextprops.a &&
    prevProps.b === nextprops.b 
  )
} //TRUE or FALSE

React.memo 함수의 두번쨰 매개변수 값에 비교할 함수를 할당하여 반환 값을 사용하여  비교한다.

 

React.memo 사용을 지양해야하는 상황

랜더링 될 때 props가 다른 경우가 대부분인 컴포넌트를 생각해보면 메모이제이션 기법의 이점을 얻기 히들다.
props가 자주 변하는 컴포넌트를 React.memo()로 래핑 할지라도, React는 두 가지 작업을 리 랜더링 할 때마다 수행한다.

1. 이전 props와 다음 props의 동등 비교를 위해 비교 함수 수행
2. 비교 함수는 거의 항상 false를 반환할 것이기 때문에, React는 이전 랜더링 내용과 당므 랜더링 내용을 비교

비교 함수의 결과는 대부분 false를 반환하기에 props 비교는 불필요하게 된다.

 

 

결론

리액트에서 랜더링 성능 최적화를 위해선 React 컴포넌트를 분리하여, React.memo를 사용하면 된다.
또한 React.memo 사용은 항상 옳은 것은 아니기에 profiler를 이용하여 성능상 이점이 있는지 확인 후 사용하자