내일배움캠프 6주차 6-5 TIL (너무어려운 리엑트..)투두리스트만들기

살려주세요... 진도가너무빨라용

유즈스테이트를 활용한 투두리스트를 만들어봣다

클론코딩이지만 상당한 난이도를 가지고있는거같다

 

조금더 공부를열심히해야할거같다

import React from 'react';
import { useState } from 'react';
import { v4 as uuid } from 'uuid';

export default function AddForm({ setTodos }) {
    const [todoValue, setTodoValue] = useState('');

    //input값이 바뀔대 값을 업데이트하는곳
    const handleChange = (event) => {
        setTodoValue(event.target.value);  //event의 target.value값을 가져옴
    };

    //form이 submit되면 실행되a면서 요소를 추가함
    const addTodo = (event) => {
        event.preventDefault(); // 새로고침을 막음
        const todo = todoValue.trim(); // 앞뒤 공백을 제거한다
        if (!todo) {
            setTodoValue('');  //만약 input값이 없으면 초기화후 리턴한다
            return;
        }

        //todo리스트 추가
        setTodos((prev) => [...prev, { todo, isDone: false, id: uuid() }]);
        setTodoValues('')
    }
    return (
        <div className='addform-container'>
            <form className='addform' onSubmit={addTodo}>
                <label className='addform_label' htmlFor="New-Todo">
                    ToDo{''}
                </label>
                <input
                    className='addform-input'
                    id='newTodo'
                    name='newTodo'
                    type="text"
                    onChange={handleChange}
                    autoFocus={true}
                    value={todoValue}
                />
                <Button value="생성" />
            </form>

        </div>
    );
}

import React from "react";

export default function TodoList({ name, todos, setTodos }) {
  const isActiveList = name === "active" ? true : false;
  return (
    <div className="todo-list">
      {/* 할일과 완료 리스트에 따라서 텍스트들 표시 */}
      <h2 className="todo-list-title">{isActiveList ? "할일🔥" : "완료✅"}</h2>
      {todos
        .filter((t) => isActiveList === !t.isDone)
        .map((t) => (
          <Todo
            todo={t.todo}
            isDone={t.isDone}
            setTodos={t.setTodos}
            key={t.id}
            id={t.id}
          />
        ))}
    </div>
  );
}

import React, { Children } from 'react';

export default function Title({ children }) {
    return (
        <h1 className='title'>{children}</h1>
    );
}

// Title 의 children 요소를 타이틀 제목으로 사용
// porps가 아닌 구조분해할당으로 요소를 보냄

import React from 'react';

export default function button({ handleClick, value }) {
    // 구조분해할당으로 handleClick, value값을 가져와서 할당해줌
    return (
        <button className='btn' onClick={handleClick}>
            {value}
        </button>
    );
}

import "./App.css";
import Title from "./components/Title/Title";
import AddForm from "./components/AddForm/AddForm";
import TodoList from "./components/TodoList/TodoList";
import { useState } from "react";

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

  return (
    <div className="container">
      {/* title */}
      {/* components에서 프롬프트를 가져옴 */}
      <Title>Sparta Todo</Title>
      {/* 내용을 추가하는 FORM */}
      <AddForm setTodos={setTodos} />
      <div className="todo-list">
        <TodoList name="active" todos={todos} setTodos={setTodos} />
        <TodoList name="done" todos={todos} setTodos={setTodos} />
      </div>
    </div>
  );
}