[2024.05.20] TIL 23일차

[ 본캠프 23일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

react 과제 재제출

1. 타임어택

[ 덧셈/뺄셈 계산기 ]

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState(0);

  const inputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAdd = () => {
    const value = parseInt(inputValue);

    if (!isNaN(value)) {
      setCount(count + value);
    }
    setInputValue("");
  };

  const handleSub = () => {
    const value = parseInt(inputValue);

    if (!isNaN(value)) {
      setCount(count - value);
    }
    setInputValue("");
  };

  const handleReset = () => {
    setCount(0);
    setInputValue("");
  };

  return (
    <div>
      <h1>덧셈과 뺄셈이 가능한 앱 만들기</h1>
      <div>
        <input type="text" value={inputValue} onChange={inputChange} />
        <button onClick={handleAdd}>더할게요</button>
        <button onClick={handleSub}>뺄게요</button>
        <button onClick={handleReset}>초기화</button>
      </div>
      <hr />
      <div>
        <h3>결과</h3>
        <p>{count}</p>
      </div>
    </div>
  );
}

• 아쉬운점 : 코드를 더 간결하게 짤 수 있을 것 같은데 그러지 못한 부분과 유효성 검사가 안되어있는 것

[ Todo List ]

[ App.jsx ]

import { useState } from "react";
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";

export default function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      title: "할 일 1",
      content: "할 일 1 내용",
      isDone: false,
    },
    {
      id: 2,
      title: "할 일 2",
      content: "할 일 2 내용",
      isDone: true,
    },
  ]);

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

  return (
    <section>
      <h1>투두리스트 타임어택</h1>
      <TodoForm setTodos={setTodos} />
      <TodoList
        title="Working... 🖥️"
        todos={workingTodos}
        setTodos={setTodos}
      />
      <TodoList title="Done ✅" todos={doneTodos} setTodos={setTodos} />
    </section>
  );
}

[ components/TodoForm.jsx ]

export default function TodoForm({ setTodos }) {
  const onSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const title = formData.get("title");
    const content = formData.get("content");

    if (!title.trim() || !content.trim()) {
      return alert("제목과 내용 모두 입력해주세요.");
    }

    const nextTodo = {
      id: crypto.randomUUID(),
      title: title,
      content: content,
      isDone: false,
    };

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

    e.target.reset();
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" placeholder="제목을 입력해주세요." name="title" />
      <input type="text" placeholder="내용을 입력해주세요." name="content" />

      <button type="submit">입력</button>
    </form>
  );
}

[ component/TodoList.jsx ]

import TodoItem from "./TodoItem";

export default function TodoList({ title, todos, setTodos }) {
  return (
    <div>
      <h2>{title}</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <TodoItem todo={todo} setTodos={setTodos} />
          </li>
        ))}
      </ul>
    </div>
  );
}

[ component/TodoItem.jsx ]

export default function TodoItem({ todo, setTodos }) {
  const { id, title, content, isDone } = todo;

  const deleteTodo = () => {
    setTodos((prev) => prev.filter((todo) => todo.id !== id));
  };

  const changeTodo = () => {
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };

  return (
    <div>
      <h2>{title}</h2>
      <h3>{content}</h3>

      <div>
        <button onClick={changeTodo}>{isDone ? "취소" : "완료"}</button>
        <button onClick={deleteTodo}>삭제</button>
      </div>
    </div>
  );
}