React.memo

개요

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

memo란 React에서 제공해주는 HOC(고차 컴포넌트)이다.
memo를 사용하면 컴포넌트에 prop check를 통하여 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다.

memorize로 인해 메모리를 추가적으로 사용되기 때문에 자주 사용하면 메모리 양이 소비가 된다.

HOC(고차 컴포넌트) : 함수형 프로그래밍에서 가져온 패턴이다. HOC는 기본적으로 컴포넌트를 받아 추가적인 props나 변경된 동작을 가진 새로운 컴포넌트를 반환하는 함수이다. HOC를 사용하면 코드를 반복하지 않고 컴포넌트간에 공통 기능을 공유할 수 있다.

---

활용예제

// Parent.js

function Parent() {
  const [parentAge, setParentAge] = useState(0);
  const [childAge, setChildAge] = useState(0);

  const incrememntParentAge = () => {
    setParentAge(parentAge + 1);
  };

  const incrememntChildAge = () => {
    setChildAge(childAge + 1);
  };

  console.log("👨‍👩‍👦 위에서 부터 부모컴포넌트가 렌더링 되었습니다.");

  return (
    <div style={{ border: "2px solid navy", padding: "10px" }}>
      <h1>👨‍👩‍👦부모</h1>
      <p>age : {parentAge}</p>
      <button onClick={incrememntParentAge}>부모 나이 증가</button>
      <button onClick={incrememntChildAge}>자녀 나이 증가</button>
      <Child name={"홍길동"} age={childAge} />
    </div>
  );
}

export default Parent;

// Child.js

function Child({ name, age }) {
  console.log("👶 위에서 부터 자녀컴포넌트도 렌더링 되었네요.");

  return (
    <div style={{ border: "2px solid powderblue", padding: "10px" }}>
      <br />
      <h3>👶 자녀</h3>
      <p>name : {name}</p>
      <p>age : {age}</p>
    </div>
  );
}

export default memo(Child);

위 예제는 자식 컴포넌트인 Child.js에 React.memo를 사용하여 memoization을 하였다.

memo에 컴포넌트를 인자로 받아서 부모 컴포넌트가 렌더링 시 prop check를 하게하여 값이 변화가 없다면 그대로 활용하도록 만들었다.

---

적용점

컴포넌트 자체를 memoize하기 때문에 화면에 출력만을 담당하는 컴포넌트에 사용하면 불필요한 렌더링을 줄일 수 있을것 같다.
useMemo = 값
useContext = 함수식
React.memo = 컴포넌트
이런식으로 생각이 정리가 되는데 적절히 활용할 수 있도록 프로젝트에 한번씩 활용해보자.

---

참조

• https://react-ko.dev/reference/react/memo
  (FE재남과 [React 공식문서 스터디 그룹]의 비공식 한글 번역 사이트 'memo')
• https://youtu.be/oqUgcxwrnSY?si=ATQfjPic6ZLDaHHF
  (별코딩 'React Hooks에 취한다' 시리즈)
• https://wikidocs.net/197629
  (위키독스 '고차 컴포넌트 (HOC)와 렌더 Props')