4주차 과제1️⃣

Requirement

• React로 할 일 목록 만들기(개인)
• 영화 소개 웹페이지 만들기(팀)

Coding

• 할 일 목록 만들기
  map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
  trim() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환
  여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미함

import React, { useEffect, useState } from "react";

function TodoList({ initialTodos }) {
  const [todos, setToDos] = useState(initialTodos);

  useEffect(() => {
    // todos 상태가 업데이트될 때마다 로컬 스토리지에 저장
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);
  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(), //랜덤 id 생성
      text: text,
      completed: false,
    };
    setToDos((prevTodos) => [...prevTodos, newTodo]);
  };
  const toggleTodo = (id) => {
    setToDos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
  const deleteTodo = (id) => {
    setToDos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
  };
  return (
    <>
      <ul id="todo-list">
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span
              style={{
                textDecoration: todo.completed ? "line-through" : "none",
              }}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>❌</button>
          </li>
        ))}
      </ul>
      <TodoForm onAddTodo={addTodo} />
    </>
  );
}

function TodoForm({ onAddTodo }) {
  const [text, setText] = useState("");

  const handleFormSubmit = (event) => {
    event.preventDefault();
    if (text.trim() !== "") {
      onAddTodo(text);
      setText("");
    }
  };

  return (
    <form id="todo-form" onSubmit={handleFormSubmit}>
      <input
        type="text"
        required
        value={text}
        onChange={(event) => setText(event.target.value)}
        placeholder="Write a To Do and Press Enter"
      />
    </form>
  );
}

function Todo() {
  // 로컬 스토리지에서 이전에 저장된 할 일 목록을 불러옴
  const savedTodos = JSON.parse(localStorage.getItem("todos")) || []; //parsedToDos : array ["a", "b", "c"]
  const [todos, setToDos] = useState(savedTodos);
  return <TodoList initialTodos={todos} />;
}
export default Todo;

Result

GitHub

개인 과제 : 10회차 - React
팀 과제 : Movie App

🫠 느낀점

6월 23일 강사님께서 제공해주신 실습 파일에 todo list 만들기 코드가 작성되어 있어서 손쉽게 과제를 진행할 수 있었다. 코드를 똑같이 따라 쓰며 과제를 진행하였는데 JavaScript 문법에 익숙하지 않아 이해되지 않은 코드들이 있었다. object와 중첩 3항 연산자, props 사용법에 대해 좀 더 공부할 필요성을 느꼈다. console.log()를 찍어가면 값이 어떻게 반환되는지 확인해가며 문법 구조에 대해 파악해야겠다. JavaScript랑도 아직 덜 친해졌는데 React 문법까지 친해지려고 하니 약간은 힘들지만, 문제가 해결될 때마다 도파민이 나오는 기분이다.

참고문서
trim(), https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trim

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.