22.12.14)후발대 과제영상 작업한 33일차

오전

React입문 영상 재필독

 

오후

후발대 과제 영상 제작

//app.jsx
import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import Input from "./components/Input";
import TodoList from "./components/TodoList";

function App() {
  const [todo, setTodo] = useState(initialList);
  return (
    <div>
      <header>My todo List</header>
      <main>
        <Input setTodo={setTodo} />
        <TodoList isActive={true} todo={todo} />
        <TodoList isActive={false} todo={todo} />
      </main>
    </div>
  );
}

export default App;

const initialList = [
  {
    title: "제목1",
    content: "내용1",
    isDone: false,
    id: uuidv4(),
  },
  {
    title: "제목2",
    content: "내용2",
    isDone: false,
    id: uuidv4(),
  },
  {
    title: "제목3",
    content: "내용3",
    isDone: true,
    id: uuidv4(),
  },
];

//input.jsx
import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

function Input({ setTodo }) {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const changeHendler = (event) => {
    event.preventDefault();

    const newUser = {
      title: title,
      content: content,
      isDone: false,
      id: uuidv4(),
    };

    setTodo((prev) => {
      return [...prev, newUser];
    });
  };
  const changeTitle = (event) => {
    setTitle(event.target.value);
  };
  const changeContent = (event) => {
    setContent(event.target.value);
  };

  return (
    <div>
      <form onSubmit={changeHendler}>
        <input value={title} onChange={changeTitle} />
        <input value={content} onChange={changeContent} />
        <button>추가</button>
      </form>
    </div>
  );
}

export default Input;

//TodoList.jsx
import React from "react";

function Todolist({ todo, isActive }) {
  return (
    <div>
      <h4>{isActive === true ? "해야할것" : "완료된 것"}</h4>
      {todo
        .filter((item) => item.isDone === !isActive)
        .map((item) => {
          return (
            <div>
              <p>{item.title}</p>
              <p>{item.content}</p>
            </div>
          );
        })}
    </div>
  );
}

export default Todolist;

#내일 할 것

오후에 과제강의를 하느라 오늘 배운것이 없다 ㅠㅠ....

내일부터 React 숙련다시 복습! 그리고 과제 연습까지 해보기!!