Antd Table과 Input이 함께 있는 페이지 성능 개선하기

백오피스 페이지에서 표는 빼놓을 수 없는 요소입니다.
표에 내용이 많을 경우 리렌더링을 현명하게 관리해야 하지요.
그러지 않는다면 성능 저하가 발생할 가능성이 높아지고, 이는 유저의 불편함으로 다가가게 됩니다.

이번 글에서는 Antd Table과 Input이 함께 있는 페이지에서 성능을 개선한 경험에 대해 이야기해보려 합니다.

트러블 상황

한눈에 보아도 Input에 값을 입력할 때 심각한 성능저하가 발생하고 있음을 알 수 있습니다.

트러블 발생 원인

Antd Table에서의 column은 다음과 같은 방식으로 정의합니다.

[
	{
	  title: <Tag bordered={false}>column1</Tag>,
	  dataIndex: "data1",
	  editable: false,
	  width: 80,
	  render: (text) => <TablePopup text={text} />,
	  shouldCellUpdate: (record, prevRecord) =>
	    !shallowEqual(record, prevRecord),
	},
	{
	  title: <PurpleTag>column2</PurpleTag>,
	  dataIndex: "data2",
	  editable: true,
	  width: 140,
	  input: <Input />,
	  required: true,
	  render: (text) => <TablePopup text={text} />,
	  shouldCellUpdate: (record, prevRecord) =>
	    !shallowEqual(record, prevRecord),
	},
	...
]

이 때문에 리렌더링마다 각 셀에서 연산을 수행하게 되고, 많은 데이터가 있다면 결국 한 번 리렌더링 시 컴포넌트가 무거운 연산을 수행하게 됩니다.

해결방법

React.memo를 사용하여 간단히 해결했습니다.

이는 props가 바뀌지 않았을 때 리렌더링을 건너뛰게 합니다.
즉, 부모 컴포넌트에서 Input값이 바뀌어 리렌더링이 되어도, Table을 담은 컴포넌트에서는 리렌더링이 발생하지 않게 하여 성능을 개선했습니다.

기존 코드

return (
  <div>
    <Input/>
    <ExampleTable {...props}/>
  </div>
);

새로운 코드

const MemoizedTable = React.memo(ExampleTable);
return (
  <div>
    <Input/>
    <MemoizedTable {...props}/>
  </div>
);

해결 결과

이제 더이상 Input의 값이 바뀌어도 랙이 발생하지 않습니다.

결론

많은 연산이 있는 컴포넌트에 React.memo를 사용하면 유의미하게 성능을 향상시킬 수 있습니다.
특히, Antd의 Table을 사용하는 경우 강력히 추천합니다.

다만, props를 계속 비교하는 React.memo의 특성 상, 남발하게 되면 오히려 성능 저하를 유발할 수 있습니다.