10.3.1 App에서 todos 상태 사용하기

    나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리합니다. App에서 useState를 사용하여 todos라는 상태를 정의하고, todos를 TodoList의 props로 전달해 보세요.

    App.js

    import React, { useState } from 'react';
    import TodoTemplate from './components/TodoTemplate';
    import TodoInsert from './components/TodoInsert';
    import TodoList from './components/TodoList';
     
    const App = () => {
      const [todos, setTodos] = useState([
        {
          id: 1,
          text: '리액트의 기초 알아보기',
          checked: true,
        },
        {
          id: 2,
          text: '컴포넌트 스타일링해 보기',
          checked: true,
        },
        {
          id: 3,
          text: '일정 관리  만들어 보기',
          checked: false,
        },
      ]);
     
      return (
        <TodoTemplate>
          <TodoInsert />
          <TodoList todos={todos} />
        </TodoTemplate>
      );
    };
     
    export default App;

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