todoList 만들어보기!

리엑트를 배웠따.
배운거 써먹어보기 위해서
todolist를 만들어보았다...!

메인 화면이다.
컴포넌트를 필요한 부분 2군데만 지정하였다.
1. 제목, 내용 부분
2. 투두리스트출력부분, 취소 완료 삭제 버튼

import Input from './component/Input';
import TodoList from './component/TodoList';
import { useState } from 'react';
import {v4 as uuidv4} from 'uuid';


function App() {


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



  return (
   <div>
    <header>머리입니다.</header>
    
    <main>

    {/* 인풋 입력창 입력 */}
    <Input setTodos={setTodos}/>

    {/* 투두리스트 출력창, 완료 취소 삭제 입력 */}
    <TodoList isActive={true} todos={todos} setTodos={setTodos}/>
    <TodoList isActive={false} todos={todos} setTodos={setTodos}/>


    </main>

    <footer>발입니다.</footer>

   </div>
  );
}

export default App;

1. 인풋부분이다.
   크게 특이한점은 없고
   기존값 넣는게 좀 힘들었다.

import React from "react";
import { useState } from "react";
import { v4 as uuidv4 } from "uuid";

function Input({ setTodos }) {
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  //새로고침 방지
  const preventpage = (event) => {
    event.preventDefault();

    // 새로고침 방지 안에 넣어줘야됨.
    // 기존값이랑 새로운값을 추가
    const newTodo = {
        title: title,
        contents: contents,
        isDone: true,
        id: uuidv4(),
      };
    
      setTodos((prev) => {
        return [...prev, newTodo];
      });
};


  // 타이틀,컨텐츠에 값 넣기
  const titleChange = (event) => {
    setTitle(event.target.value);
  };
  const contentsChange = (event) => {
    setContents(event.target.value);
  };



  return (
    <form onSubmit={preventpage}>
      <div>
        제목: <input value={title} onChange={titleChange} />
        내용: <input value={contents} onChange={contentsChange} />
        <button>추가하기</button>
      </div>
    </form>
  );
}

export default Input;

2. 완료,취소 버튼이랑
   삭제하기 버튼 만들기가 힘들었다.

useState사용에 대해 이해가 간다.
단 이렇게까지 만들기의 과정이 생각이 안난다.
이건 코딩을 많이 접해봐야 나오는것인가...?

import React from 'react'

function TodoList({todos, setTodos, isActive}) {


    // 완료 취소 스위치 버튼
    const switchButton = (event) => {
      return setTodos((prev) => {
        return prev.map((t) => {
          if (t.id === event.target.id) {
            return { ...t, isDone: !t.isDone };
          } else {
            return t;
          }
        });
      });
    };
    
    // 삭제버튼
      const deleteButton = (event) => {
        return setTodos((prev) => {
            return prev.filter((t)=> {
                return t.id !== event.target.id
            })
        })
      }


  return (
    <div>
      <h5>{isActive === true ? "해야될일" : "완료한일"}</h5>

      {todos
        .filter((item) => {
          return item.isDone === isActive;
        })
        .map((item) => {
          return (
            <div key={item.id}>
              <h5>{item.title}</h5>
              <p>{item.contents}</p>
              <button onClick={switchButton} id={item.id}>
                {isActive === true ? "완료" : "취소"}
              </button>
              <button onClick={deleteButton} id={item.id}>
                삭제
              </button>
            </div>
          );
        })}
    </div>
  );
}

export default TodoList