SingleProject_React 학습(TodoList)

 

 

// 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨

// -> UI구축을 훨씬 쉽게 만들어줌

// 컴포넌트를 생성하고 UI 요소를 컴포넌트 내부에서 JSX통해 선언

// -> 리액트가 반응 -> 리액트 컴포넌트가 '선언체'라는 개념이 아주 중요

// 리액트에서 랜더링은 현재 props와 state의 상태에 기초하여

// UI구성을 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미

// triggering -> rendering -> commit 순으로 진행

// 브라우저 랜더링은 다른 프로세스로 페인팅 이라고도 부름

import Layout from "./components/Layout";

import TodoContainer from "./components/todo/TodoContainer";

const App = () => {

  return (

    <Layout>

      <TodoContainer />

    </Layout>

  );

};

export default App;

 

const Layout = ({ children }) => {

  return <main className="layout">{children}</main>;

};

export default Layout;

 

import TodoForm from "./TodoForm";

import TodoList from "./TodoList";

import ExTodoForm from "./ExTodoForm";

import { useState } from "react";

const TodoContainer = () => {

  const [todos, setTodos] = useState([

    {

      id: 1,

      title: "ok",

      content: "content111",

      isDone: false,

    },

    {

      id: 2,

      title: "ok2",

      content: "content222",

      isDone: true,

    },

  ]);

  const workingTodos = todos.filter((todo) => !todo.isDone);

  const doneTodos = todos.filter((todo) => todo.isDone);

  return (

    <section>

      <h1 className="title">Todo List</h1>

      <ExTodoForm setTodos={setTodos} />

      <TodoList title="Working" todos={workingTodos} setTodos={setTodos} />

      <TodoList title="Done" todos={doneTodos} setTodos={setTodos} />

    </section>

  );

};

export default TodoContainer;

 

// 비제어 컴포넌트

const ExTodoForm = ({ setTodos }) => {

  const onSubmit = (e) => {

    e.preventDefault();

    const formData = new FormData(e.target);

    const title = formData.get("title");

    const content = formData.get("content");

    // 시작과 끝에 공백 문자를 제거 -> trim()

    if (!title.trim() || !content.trim()) {

      return alert("no!");

    }

    const nextTodo = {

      id: crypto.randomUUID(),

      title,

      content,

      isDone: false,

    };

    // useState의 비동기성

    setTodos((prevTodos) => [nextTodo, ...prevTodos]);

    e.target.reset();

  };

  return (

    <div>

      <form onSubmit={onSubmit}>

        <input type="text" placeholder="제목" name="title" />

        <input type="text" placeholder="내용" name="content" />

        <button type="submit">등록</button>

      </form>

    </div>

  );

};

export default ExTodoForm;

 

// 제어 , 비제어 컴포넌트

// 제어 컴포넌트 : 개발자가 매순간 개입하므로 코드가 많아짐

// 비제어 '' : 한 순간만 개입하여 코드가 단순해짐

// 제어 컴포넌트

import { useState } from "react";

const TodoForm = () => {

  const [title, setTitle] = useState("");

  const [content, setContent] = useState("");

  const onSubmit = (e) => {

    e.preventDefault();

    console.log(title, content);

  };

  return (

    <div>

      <form onSubmit={onSubmit}>

        <input

          type="text"

          placeholder="제목"

          value={title}

          onChange={(event) => setTitle(event.target.value)}

        />

        <input

          type="text"

          placeholder="내용"

          value={content}

          onChange={(event) => setContent(event.target.value)}

        />

        <button type="submit">등록</button>

      </form>

    </div>

  );

};

export default TodoForm;

 

import TodoItem from "./TodoItem";

const TodoList = ({ title, todos, setTodos }) => {

  return (

    <div>

      <h2 className="todoListTitle">{title}</h2>

      <ul>

        {todos.map((todo) => (

          <li key={todo.id}>

            <TodoItem todo={todo} setTodos={setTodos} />

          </li>

        ))}

      </ul>

    </div>

  );

};

export default TodoList;

 

const TodoItem = ({ todo, setTodos }) => {

  const { id, title, content, isDone } = todo;

  const deleteTodo = () => {

    setTodos((prev) => prev.filter((todo) => todo.id !== id));

  };

  const toggleTodo = () => {

    setTodos((prev) =>

      prev.map((todo) =>

        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo

      )

    );

  };

  return (

    <div className="todoCard">

      <h3 className="todoTitle">{todo.title}</h3>

      <p>{todo.content}</p>

      <div>

        <button onClick={toggleTodo}>{isDone ? "취소" : "완료"}</button>

        <button onClick={deleteTodo}>삭제</button>

      </div>

    </div>

  );

};

export default TodoItem;

 

.layout {

  max-width: 1200px;

  min-width: 800px;

  margin: 0 auto;

}

.title {

  font-size: 2rem;

  font-weight: bold;

  margin: 1rem 0;

}

.todoListTitle {

  font-size: 1.5rem;

  font-weight: bold;

  margin: 1rem 0;

}

.todoCard {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  padding: 1rem;

  border: 1px solid #ccc;

}

.todoTitle {

  font-size: 1.5rem;

  font-weight: bold;

}