[React]속성이 변하는 component만 랜더링 하게 하기 -React.memo()

react의 놀라운 기능 React.memo()가 있다.

react의 놀라운 장점 중 하나는 component의 state가 변할때 자동으로 새로고침(랜더링)해준다는 것인데 이 장점이 때로는 불필요할 때가 있다.

지금 만들고 있는 프로젝트를 예로 들어보자.

Board에 있는 메모(Card)들이 순서가 바뀔때 사실 index가 바뀌는 메모들만 랜더링해주면 되지만 별도의 조치가 없으면 모든 메모를 랜더링한다. 지금은 메모 갯수가 적기때문에 사실 모든 메모가 랜더링 된다고해서 큰 문제가 되는건 아니지만 메모의 갯수가 100개만 돼도 쓸데없는 랜더링 때문에 불필요한 비용이 들것이다.

이때 사용하는게 바로 React.memo()이다.

게다가 코드를 많이 수정할 필요는 없고 기존에 component export하는 코드에 React.memo()를 추가해주면 됨

기존코드

function DraggableCard({ toDo, index }: IDraggableCard) {
  console.log(toDo, 'has been rendered');

  return (
    <Draggable key={toDo} draggableId={toDo} index={index}>
      {(provided) => (
        <Card
          ref={provided.innerRef}
          {...provided.dragHandleProps}
          {...provided.draggableProps}
        >
          <span> 🎈</span>
          {toDo}
        </Card>
      )}
    </Draggable>
  );
}

export default DraggableCard;

기존코드의 콘솔

메모가 처음 랜더링되고 d와 e의 순서를 바꿨을 뿐인데 전체 메모가 세번이나 랜더링 되는것을 볼 수 있다.

React.memo를 추가한 코드

function DraggableCard({ toDo, index }: IDraggableCard) {
  console.log(toDo, 'has been rendered');

  return (
    <Draggable key={toDo} draggableId={toDo} index={index}>
      {(provided) => (
        <Card
          ref={provided.innerRef}
          {...provided.dragHandleProps}
          {...provided.draggableProps}
        >
          <span> 🎈</span>
          {toDo}
        </Card>
      )}
    </Draggable>
  );
}

export default React.memo(DraggableCard);

React.memo()추가한 콘솔

이번에도 똑같이 d와 e의 순서를 바꿨는데 처음의 전체 메모 랜더링 이후에는 e와 d만 다시 랜더링 되는 것을 볼 수있다.