리스트에 관련된 컴포넌트를 최적화할 때는 리스트 내부에서 사용하는 컴포넌트도 최적화해야 하고, 리스트로 사용되는 컴포넌트 자체도 최적화해 주는 것이 좋습니다.

TodoList 컴포넌트를 다음과 같이 수정해 보세요.

TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';
 
const TodoList = ({ todos, onRemove, onToggle }) => {
  return (...);
};
 
export default React.memo(TodoList);

---

 

위 최적화 코드는 현재 프로젝트 성능에 전혀 영향을 주지 않습니다. 왜냐하면, TodoList 컴포넌트의 부모 컴포넌트인 App 컴포넌트가 리렌더링되는 유일한 이유가 todos 배열이 업데이트될 때이기 때문이죠. 즉, 지금 TodoList 컴포넌트는 불필요한 리렌더링이 발생하지 않습니다. 하지만 App 컴포넌트에 다른 state가 추가되어 해당 값들이 업데이트될 때는 TodoList 컴포넌트가 불필요한 리렌더링을 할 수도 있겠죠. 그렇기 때문에 지금 React.memo를 사용해서 미리 최적화해 준 것입니다.

리스트 관련 컴포넌트를 작성할 때는 리스트 아이템과 리스트, 이 두 가지 컴포넌트를 최적화해 주는 것을 잊지 마세요. 그러나 내부 데이터가 100개를 넘지 않거나 업데이트가 자주 발생하지 않는다면, 이런 최적화 작업을 반드시 해 줄 필요는 없습니다.