11.1 많은 데이터 렌더링하기

    우선 실제로 랙(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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.