우선 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해 보겠습니다. 물론 데이터를 하나하나 직접 입력하지 않고 코드를 사용하여 쉽게 추가할 것입니다.

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

App.js

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';
 
function createBulkTodos() {
  const array = [];
  for (let i = 1; i <= 2500; i++) {
    array.push({
      id: i,
      text: `할 일 ${i}`,
      checked: false,
    });
  }
  return array;
}
 
const App = () => {
  const [todos, setTodos] = useState(createBulkTodos);
 
  // 고윳값으로 사용될 id
  // ref를 사용하여 변수 담기
  const nextId = useRef(2501);
 
  (...)
};
 
export default App;

---