[React] React.memo()

참고문서 https://dmitripavlutin.com/use-react-memo-wisely

 

유튜브를 보거나 보고싶은 페이지 또는 어플이 있어서 다운로드를 받고 켰는데 UI 반응이 느리다면?

정말 이 페이지가 아니면 난 죽을꺼같다 정도가 아니면 창을 닫고 나간 경험이 한번 쯤은 있을거다.

 

인터넷 속도만 해도 예민한사람들은 10ms 차이에도 엄청난 차이를 느낀다.

 

이러한 반응속도를 줄이기 위해 React는 자체적으로 React.memo() 를 제공한다. 렌더링 결과를 메모이징(Memoizing) 함으로써 불필요한 리렌더링을 줄이는 것이다.

 

React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다.

 

컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);

React.memo(Movie) 는 새로 메모이징된 컴포넌트인 MemoizedMovie를 반환한다.

 

MemoizedMovie 의 렌더링 결과는 메모이징 되어있다. 만약 title이나 releaseData 같은 props가 변경되지 않는다면다음 렌더링 때 메모이징 된 내용을 그대로 사용한다.

// 첫 렌더이다. React는 MemoizedMovie 함수를 호출한다.
<MemoizedMovie
  movieTitle="Heat"
  releaseDate="December 15, 1995"
/>

// 다시 렌더링 할 때 React는 MemoizedMovie 함수를 호출하지 않는다.
// 리렌더링을 막는다.
<MemoizedMovie
  movieTitle="Heat"
  releaseDate="December 15, 1995"
/>

 

하지만 과한것도 금물, React.memo() 를 사용하지 말아야할 순간이 오기도 한다.

 

만약 성능적인 이점을 얻지 못한다면 사용하지 않는 것이 좋다. 또한 클래스 기반의 컴퍼넌트를 React.memo()로 래핑하는 것은 적절하지 않다. 클래스 기반의 컴포넌트에서 메모이제이션이 필요하다면 PureComponet를 확장하여 사용하거나, shouldComponentUpdate() 메소드를 구현하는 것이 적절하다.

 

또한 렌더링 될때 props 가 다른 경우가 대부분인 컴포넌트를 생각해보면 메모이제이션 기법의 이점을 얻기 힘들다.

props가 자주 변하는 컴포넌트를 React.memo() 로 래핑한다고 해도 React는 두 가지 작업을 리렌더링 할 때마다 수행 할 것이다.

 

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

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

 

결론!

 

React.memo()는 함수형 컴포넌트에서도 메모이제이션의 이점을 얻게 해주는 훌륭한 도구다. 올바르게만 사용한다면 변경되지 않은 동일한 props에 대해 리렌더링 하는 것을 막을 수 있다 (속도 up)

 

하지만 콜백 함수를 props 로 사용하는 컴포넌트에서 메모이징 할 때 주의해야하며 같은 렌더링을 할 때 이전과 동일한 콜백 함수 인스턴스를 넘기는지 확실히 해야한다.