[리액트를 다루는 기술] React.memo로 최적화 할 때 주의점

TodoList.js

import React from 'react';
import './TodoList.scss';
import TodoListItem from './TodoListItem';

function TodoList({todos, onRemove, onToggle}) {
  return (
    <div className='TodoList'>
      {todos.map(todo => (
        <TodoListItem
          todo={todo}
          key={todo.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  )
}

export default React.memo(TodoList); // React.memo 추가

• React.memo를 해줄 땐 리스트 아이템과 리스트 모두 적용해야 함(TodolistItem.js는 이미 적용함)
• 리스트가 100개를 넘어가거나 업데이트가 자주 일어나지 않는다면 필수는 아님