React memo

React memo

 리액트에서 제공하는 고차 컴포넌트(Higher Order Component)이다. 고차 컴포넌트는 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수이며, React memo는 렌더링이 되어야 할 상황에 놓일 때마다 Props Check를 통해서 자신이 받는 Props에 변화가 있는지 확인을 하고 변화가 있다면 리렌더링을 하고, 변화가 없다면 기존에 렌더링이 된 내용을 재사용한다.

 

 React memo는 Props를 기반으로 구성요소만 memoization 하기 때문에 컴포넌트 내에서 useEffect, useState와 같은 훅을 사용하는 경우 변경 여부에 관계없이 컴포넌트가 리렌더링이 된다.

 

 주의할 점은 부모 컴포넌트에서 객체를 자식 컴포넌트에게 Props로 전달할 때 React.memo를 사용해도 memoization이 되지 않는다는 점인데, 아래와 같은 객체일 경우 name은 lastName과 FirstName을 저장하는 것이 아닌 저것들이 저장된 주소를 저장하기 때문에 부모 컴포넌트에서 렌더링이 되면서 name에 저장된 주소값도 변경이 되기 때문에 memoization이 되지 않는다. 따라서 객체를 Props로 전달해주고 React.memo를 사용해서 최적화를 진행할 경우 useMemo를 사용해서 객체를 memoization 해줘야 한다.

(객체가 아닌 함수의 경우에는 useCallback()을 사용해야 함)

 

const name = {
   lastName: 'Kim'
   FirstName: 'Yongbin'
}

// useMemo 적용
const name = useMemo(() => {
   return {
   lastName: 'Kim'
   FirstName: 'Yongbin'
   }
}, [])

 

---

프로젝트에서 구현

 중고거래 플랫폼 프로젝트를 진행하면서 버튼에서 사용되는 아이콘이나, 기본 프로필 이미지 등은 변경되지 않는 부분이기 때문에 React.memo를 사용해서 리렌더링을 방지하였다. 사용방법은 아래와 같다.

 

// src/assets/svgs/CardPencilSvg.tsx

import React from 'react';

const CardPencilSvg = React.memo(function CardPencilSvg() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
      <path d="M9.5 15.5H16.25" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <path
        d="M12.875 3.12493C13.1734 2.82656 13.578 2.65894 14 2.65894C14.2089 2.65894 14.4158 2.70009 14.6088 2.78004C14.8019 2.86 14.9773 2.97719 15.125 3.12493C15.2727 3.27266 15.3899 3.44805 15.4699 3.64108C15.5498 3.83411 15.591 4.04099 15.591 4.24993C15.591 4.45886 15.5498 4.66574 15.4699 4.85877C15.3899 5.0518 15.2727 5.22719 15.125 5.37493L5.75 14.7499L2.75 15.4999L3.5 12.4999L12.875 3.12493Z"
        stroke="white"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
});

export default CardPencilSvg;

 

 최적화를 할 시간이 많이 부족해서 아이콘에 대해서만 memoization을 진행했다. 이러한 React memo는 로직이 복잡할 경우 더 큰 효과를 볼 수 있기 때문에 추후 시간에 여유가 있다면 컴포넌트를 조금 더 세분화하고, React.memo를 통해 성능을 높이는 방안을 도입해야겠다.

 

 

 

reference

https://www.youtube.com/watch?v=oqUgcxwrnSY