개요

직전 글에선 useMemo 훅을 알아봤다. 해당 훅은 memorization을 이용해 인자가 변한 경우에만 함수 연산을 실행하도록 만들어 주는 훅이었다.

이번에는, 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해서 알아본다.

React.memo() 함수

이 함수를 사용한다면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄수있다.

사용법은 굉장히 쉬운데 그저 React.memo() 함수의 단일 파라미터에 대상 컴포넌트를 전달하면 된다.
export default React.memo(Component)

import React from 'react';

const CreateUser = ({ username, email, onChange, onCreate }) => {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  );
};

export default React.memo(CreateUser);

이렇게 React.memo로 컴포넌트를 감싸주었기 때문에 만일 User의 props중 변한 것이 없는 경우엔 해당 컴포넌트는 재 렌더링 되지 않는다.

하지만, User 중 하나라도 수정하면 모든 User 들이 리렌더링되고, CreateUser 도 리렌더링이 됩니다.

참조 : 벨로퍼트 모던 리액트 - React.memo 를 사용한 컴포넌트 리렌더링 방지