React의 memo API

다음 훅을 살펴보기 전에, 컴포넌트의 props가 변경되지 않을 때 불필요한 리렌더링을 방지하는 데 도움이 되는 유용한 API memo에 대해 언급할 필요가 있습니다.

예제를 통해 살펴보겠습니다. 이름과 성을 입력한다고 가정하고, 두 개의 입력 필드가 있는 App 컴포넌트를 만들어 보겠습니다:

App.jsxreturn (
  <div>
    <label>
      name:
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </label>
    <br />
    <label>
      surname:
      <input value={surn} onChange={(e) => setSurn(e.target.value)} />
    </label>
  </div>
);

컴포넌트 상단에 각각의 상태를 추가하겠습니다:

App.jsxconst [name, setName] = useState('');
const [surn, setSurn] = useState('');

자식 컴포넌트 Child.js도 만들어 보겠습니다. 입력된 이름을 보여주는 인사말을 출력하도록 하고, 이 컴포넌트가 렌더링될 때마다 콘솔에 문자열 'child render'가 출력되도록 하겠습니다:

Child.jsxfunction Child({ name }) {
  console.log('child render');
  return <h3>Hello {name}!</h3>;
}

주 컴포넌트의 마지막 입력 필드 뒤에 Child를 추가하고, prop으로 이름을 전달하겠습니다:

App.jsx<Child name={name} />

주 컴포넌트에서 이를 import 하겠습니다:

App.jsximport Child from './Child';

이제 콘솔을 열고 입력 필드에 이름과 성을 입력해 보겠습니다. 여기서 우리는 성 필드에 문자를 입력할 때도 자식 컴포넌트가 매번 다시 렌더링되는 것을 볼 수 있습니다. 우리 컴포넌트가 작기 때문에 아무런 문제가 없습니다. 하지만 이 컴포넌트가 많은 양의 데이터를 표시하면서도 매번 다시 렌더링된다고 상상해 보세요.

이제 자식 컴포넌트를 memo로 감싸보고, 렌더링이 어떻게 변하는지 살펴보겠습니다. 먼저 여기에 memo를 import 하겠습니다:

Child.jsximport { memo } from 'react';

그런 다음 새로운 변수를 만들고 memo로 감싼 Child를 할당하겠습니다. 다음과 같은 함수 표현식이 됩니다:

Child.jsxconst Child = memo( function Child({ name }) {
  console.log('child render');
  return <h3>Hello {name}!</h3>;
});

콘솔을 열고 다시 필드에 이름과 성을 입력해 보겠습니다. 이제 성을 입력할 때, 자식 컴포넌트가 다시 렌더링되지 않는 것을 볼 수 있습니다.

props가 변경되지 않았더라도 컴포넌트에서 사용하는 상태나 변경을 사용하는 컨텍스트가 바뀌면 이것은 작동하지 않는다는 점을 기억해야 합니다.