[React] memo 사용 방법

React에서 memo 사용 방법에 대해 알아보겠습니다.

컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다.

 

import React from 'react';

function MyComponent(props) {
  /* props를 사용하여 렌더링 */
}

export default React.memo(MyComponent, areEqual);

사용

이전 포스트 [React] Drag and Drop에서 드래그, 드롭 시 바뀐 부분이 아닌 전체가 리랜더링이 되어 텍스트의 흔들림이 가끔씩 발생하는 문제가 있었습니다.

Card 부분을 DraggableCard Component로 새로 만들었습니다. DraggableCard에게 동일한 index와 todo prop을 주고 불필요한 리랜더링을 하지 않도록 하기 위해 memo를 사용하였습니다.

// DraggableCard.tsx
import React from 'react';
import { Draggable } from 'react-beautiful-dnd';
import styled from 'styled-components';

const Card = styled.div`
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 10px 10px;
  background-color: white;
`;

interface IDraggableCardProps {
  toDo: string;
  index: number;
}

function DraggableCard({ toDo, index }: IDraggableCardProps) {
  return (
    <Draggable key={toDo} draggableId={toDo} index={index}>
      {(provided) => (
        <Card ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps}>
          {toDo}
        </Card>
      )}
    </Draggable>
  );
}

export default React.memo(DraggableCard);

실제로 바뀐 것들만 리렌더링 되어 텍스트가 흔들리는 문제를 해결함으로써 최적화 할 수 있었습니다.

주의

React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는 useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링 됩니다.

이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 방지하기 위하여 사용하지 마세요. 버그를 만들 수 있습니다.

참고

• https://ko.reactjs.org/docs/react-api.html#reactmemo