todolist

투두리스트를 만들어보았다.
저번에 완성하지 못한 채로 제출해서 너무 아쉬웠고,
스스로 해보고 싶어서, 강의 한번 듣고, 2회독 때 실습하면서 만들어봤다.

하루종일 투두리스트 한 거 같은데.......
구조를 파악하는게 너무 어려워서 계속 파악하려고 노력했다.

그래도 느리지만 오전의 나보다 성장했다
내일의 나는 오늘의 나보다 더 성장해있겠지

배운점

• form태그는 기본적으로 onsubmit 속성을 가지고 있음
• onsubmit안에는 함수가 들어감
• form태그 안에서 액션이 일어날 때 onsubmit 발동
• form 태그는 기본적으로 페이지 새로고침 함

\

import React, { useState } from "react";
import uuid from "react-uuid";

function App() {
  //인풋
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");
  // 리스트
  const [todos, setTodos] = useState([
    {
      id: uuid(),
      title: "제목1",
      contents: "내용1",
      isdone: false,
    },
    {
      id: uuid(),
      title: "제목2",
      contents: "내용2",
      isdone: true,
    },
    {
      id: uuid(),
      title: "제목3",
      contents: "내용3",
      isdone: false,
    },
  ]);

  return (
    <div>
      <header
        style={{
          backgroundColor: "#e69ed8",
        }}
      >
        헤더
      </header>
      <main
        style={{
          backgroundColor: "#8be0b6",
        }}
      >
        <div>
          <form
            onSubmit={(event) => {
              event.preventDefault();
              const newTodo = {
                id: uuid(),
                title: title,
                contents: contents,
                isdone: false,
              };
              setTodos([...todos, newTodo]);
            }}
          >

            <input
              //state에 저장
              value={title}
              onChange={(event) => {
                setTitle(event.target.value);
              }}
            />
            내용:{" "}
            <input
              value={contents}
              onChange={(event) => {
                setContents(event.target.value);
              }}
            />
            <button>저장</button>
          </form>
        </div>

        <div>
          <h1>리스트</h1>
          <div>
            <h2>오늘 해야할 것</h2>
          </div>

          {todos
            .filter((filteredTodos) => filteredTodos.isdone === false)
            .map(function (mappedTodos) {
              return (
                <div
                  key={mappedTodos.id}
                  style={{
                    border: "1px solid black",
                    paddingLeft: "3px",
                    margin: "10px",
                    paddingBottom: "20px",
                  }}
                >
                  <p>{mappedTodos.id}</p>
                  <h2>{mappedTodos.title}</h2>
                  <p>{mappedTodos.contents}</p>
                  <p>완료여부 : {mappedTodos.isdone.toString()}</p>
                  <button
                    onClick={() => {
                      const newTodos = todos.map((item) => {
                        if (item.id === mappedTodos.id) {
                          return {
                            ...item,
                            isdone: !item.isdone,
                          };
                        } else {
                          return item;
                        }
                      });
                      setTodos(newTodos);
                    }}
                  >
                    완료
                  </button>
                  <button
                    onClick={() => {
                      const deletedTodos = todos.filter((item) => {
                        return item.id !== mappedTodos.id;
                      });
                      setTodos(deletedTodos);
                    }}
                  >
                    삭제
                  </button>
                  {/* 불리언 요소여서 문자로 바꿔줘야됨 */}
                </div>
              );
            })}

          <div>
            <h2>완료!</h2>
            {todos
              .filter((filteredTodos) => filteredTodos.isdone === true)
              .map(function (mappedTodos) {
                return (
                  <div
                    key={mappedTodos.id}
                    style={{
                      border: "1px solid black",
                      paddingLeft: "3px",
                      margin: "10px",
                      paddingBottom: "20px",
                    }}
                  >
                    <p>{mappedTodos.id}</p>
                    <h2>{mappedTodos.title}</h2>
                    <p>{mappedTodos.contents}</p>
                    <p>완료여부 : {mappedTodos.isdone.toString()}</p>

                    <button
                      onClick={() => {
                        const newTodos = todos.map((item) => {
                          if (item.id === mappedTodos.id) {
                            return {
                              ...item,
                              isdone: !item.isdone,
                            };
                          } else {
                            return item;
                          }
                        });
                        setTodos(newTodos);
                      }}
                    >
                      완료취소
                    </button>
                    <button
                      onClick={() => {
                        const deletedTodos = todos.filter((item) => {
                          return item.id !== mappedTodos.id;
                        });
                        setTodos(deletedTodos);
                      }}
                    >
                      삭제
                    </button>
                    {/* 불리언 요소여서 문자로 바꿔줘야됨 */}
                  </div>
                );
              })}
          </div>
        </div>
      </main>

      <footer
        style={{
          backgroundColor: "#8b9fe0",
        }}
      >
        푸터
      </footer>
    </div>
  );
}

export default App;