기능 구현 목표

1. 에디터 컴포넌트에 Todo 입력 & 추가 버튼 클릭시 리스트 컴포넌트에 추가 기능

2. 리스트 컴포넌트에 Todo 수정 & 삭제 기능

3. 검색 기능

---

초기 작업

state를 이용해야 하는 모든 컴포넌트의 조상인 App 컴포넌트에 state 배치

import "./App.css";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";
import { useState } from "react";

function App() {
  const [todos, setTodos] = useState([]);

  return (
    <div className="App">
      <Header />
      <Editor />
      <List />
    </div>
  );
}

export default App;

수정 삭제 조회를 위한 임시 데이터 작성

const mockData = [
    {
      id: 0,
      isDone: false, // 체크박스
      content: "React 공부하기", // 내용
      date: new Date().getTime(),
    },
    {
      id: 1,
      isDone: false, // 체크박스
      content: "빨래하기", // 내용
      date: new Date().getTime(),
    },
    {
      id:2,
      isDone: false, // 체크박스
      content: "청소하기", // 내용
      date: new Date().getTime(),
    },
  ];

임시 데이터 값으로 초기화

import "./App.css";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";
import { useState } from "react";

const mockData = [
  {
    id: 0,
    isDone: false, // 체크박스
    content: "React 공부하기", // 내용
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false, // 체크박스
    content: "빨래하기", // 내용
    date: new Date().getTime(),
  },
  {
    id:2,
    isDone: false, // 체크박스
    content: "청소하기", // 내용
    date: new Date().getTime(),
  },
];

function App() {
  const [todos, setTodos] = useState([]);

  return (
    <div className="App">
      <Header />
      <Editor />
      <List />
    </div>
  );
}

export default App;

---

점검