[React] React.memo로 만드는 성능 최적화 기법

개요

가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고..

오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁

 

React.memo 라는 것

한문장으로 정리하면,

props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것

그렇다. 이게 끝이다. 그럼 언제 사용할까?

당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다.

 

예제

코드

// parents.tsx
// ...

<ul ref={magic.innerRef} {...magic.droppableProps}>
  {toDos.map((toDo, index) => (
    <DragabbleCard key={toDo} toDo={toDo} index={index} />
  ))}
  {magic.placeholder}
</ul>

// ...

// children.tsx

import React, { memo } from "react";
// ...
export default memo(DragabbleCard);

위와 같이 메모를 사용한다. 그럴 경우 렌더링 되는 것은 아래와 같이 차이가 나게 된다.

렌더링 결과

React.memo 적용 전 (e,f 변경 시, 전체가 재렌더링 된다)

React.memo 적용 후 (e,f 변경 시, e,f 만 렌더링 된다.)

결론

props가 동일할 경우, 마지막으로 렌더링 된 값을 재사용하는 것이다.

이로써 렌더링 최적화가 이루어진다.

List의 길이가 매우 길 경우, 반드시 적용해야 하부에 렌더링되는 li에 해당하는 컴포넌트들이 재렌더를 하지 않게 된다.

list item 같은 경우는 컴포넌트로 반드시 분리하고, memo를 적용하는 것이 정석으로 판단된다.

 

좀 더 알아보기

고차 컴포넌트(HOC, Higher Order Component)에 대해서 알아볼 필요가 있다. 고차 컴포넌트는 React API의 일부가 아니다.

고차 컴포넌트는 하부 컴포넌트들을 합쳐서 상위에 있는 컴포넌트가 통합해서 렌더링 하는 것을 말한다.

CRA 기준으로 말하면, components > App.js > index.js 순으로 보면 될 것이다. index.js 가 가장 고차 컴포넌트에 속한다.

Hook 에서는 개별적인 동작을 하는 것을 더 주안점을 두고 있다. 실제로 커스텀 훅 같은 것도 있고, HOC하고는 개념이 좀 다르다.

최근 추세는 custom hook으로 개별적인 동작을 하도록 많이 하는 편이다. 

그러나, custom hook을 논하는 것은 좀 다른 분야를 논하는 것이다. 좀 더 프로세싱에 관한 부분으로 보인다.

state의 개별적인 관리 & 조작이 좀 더 필요할 때 custom hook 을 사용하여 컴포넌트를 분리하는 것이고,

그럴 필요가 없이, 통합적인 렌더링만 필요하게 component를 나눌 때 (list item 같은)는 유지보수의 용이성만 보고 작업하는 것이다.

 

참고

React 최상위 API – React

고차 컴포넌트 – React