[TIL][23.11.07] React로 To-do-list 만들기

요약

Ract로 To Do List 만들기

---

고민한 내용

 

처음에 공부한데로 id값을 전체 length에서 + 1씩 추가를 했다. 하지만 리스트 하나가 아니라 '작업 중'과 '작업 완료'로 나뉘게 되면서 순서가 꼬이게 됐다.

 

생각한 해결 방법

 

그래서 먼저 작업중이든 작업완성이든 하나라 리스트에 담아서 아이디값을 부여했다. 기본값에 isDone을 넣어 완성인지 아닌지로 판단하고 순서별로 정리가 될 수 있게 id값 순서대로 리스트를 정리했다. 이외에 페이지들 components를 어떻게 나눌지도 고민을 했다.

 

1. 기본 state 정의

기본 state를 정해서 마지막 id값으로 늘어나게끔 정의했다.

let number = 2;

function Input({ todos, setTodos }) {
  // 추가하게 될 빈값 기본값
  const initialState = {
    id: 0,
    title: "",
    body: "",
    isDone: false,
  };
  const [todo, setTodo] = useState(initialState);

  // input 입력값 변화 체크
  const onChangeHandler = (event) => {
    const value = event.target.value;
    const name = event.target.name;
    setTodo({ ...todo, [name]: value });
  };

  // list 추가하기
  const onSubmitHandler = () => {
    if (todo.title.trim() === "" || todo.body.trim() === "")
      alert("내용을 입력해주세요.");
    setTodos([...todos, { ...todo, id: number }]);
    setTodo(initialState);
    number++;
  };

2. Components 정리

react 관련 작업물들을 보다보니 최대한 App.jsx 에는 코드를 적게 적는거 같다고 느껴서, 메인으로 쓰이게될 페이지를 따로 뺐다. 그리고 그 페이지에 사용되는 components로 따로 뺏다.

 

pages

- TodoList.jsx

import React, { useState } from "react";
import List from "../components/List";
import Input from "../components/Input";
import "../App.css";

function TodoList() {
  // 기존 최초 배열
  const [todos, setTodos] = useState([
    {
      id: 0,
      title: "리액트 기초 공부하기",
      body: "리액트 기초를 공부해봅시다.",
      isDone: true,
    },
    {
      id: 1,
      title: "리액트 중급 공부하기",
      body: "리액트 중급을 공부해봅시다.",
      isDone: false,
    },
  ]);

  return (
    <div className="app-container">
      <header className="app-header">
        <h1>My Todo List</h1>
        <div>React</div>
      </header>
      <main className="app-main">
        <Input todos={todos} setTodos={setTodos} />
        <List todos={todos} setTodos={setTodos} />
      </main>
    </div>
  );
}

export default TodoList;

 

components

- Input.jsx

- List.jsx

- Todo.jsx

---

결과 화면

 

 

---

회고

 

백엔드 작업이 들어간게 아니기 때문에 재접속하게 되면 다시 리셋되게 되있다.

하지만 다른 분들꺼를 보니 localStorage로라도 기록을 남겼다. 작업은 완성됐지만 심화과정으로 그걸 추가해보는게 어떨가 생각해본다.