React의 memo API

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

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

return (
	<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>
);

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

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

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

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

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

<Child name={name} />

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

import Child from './Child';

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

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

import { memo } from 'react';

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

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

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

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

이 강의에서 만든 App 컴포넌트 코드를 가져와서, 첫 번째 입력 필드만 남겨두세요. 문단에 'long text' 텍스트가 들어 있는 React 컴포넌트 Text를 만들고, App의 입력 필드 뒤에 배치하세요.

Text 컴포넌트에 console.log('text render'); 줄을 추가하세요. 입력 필드에 문자를 입력할 때 Text 컴포넌트가 매번 다시 렌더링되는지 확인하세요.

이제 Text 컴포넌트를 memo로 감싸세요. 입력 필드에 문자를 입력할 때 Text 컴포넌트가 다시 렌더링되지 않는지 확인하세요.