ToDoList_추가하기 구현

ToDoList.jsx

import React, { useState } from "react";
import AddTodo from "../AddTodo/AddTodo";

export default function ToDoList() {
  const [todos, setTodos] = useState(initialState);
  const handleAdd = (todo) => setTodos([...todos, todo]);
  return (
    <section>
      <ul>
        {todos.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
      <AddTodo onAdd={handleAdd} />
    </section>
  );
}
const initialState = [
  { id: "123", text: "장보기", status: "active" },
  { id: "124", text: "공부하기", status: "active" },
];

---

AddTodo.jsx

import React, { useState } from "react";

export default function AddTodo({ onAdd }) {
  const [text, setText] = useState("");
  const handleChange = (e) => setText(e.target.value);
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e.target);
    text.trim().length === 0
      ? alert(`한글자 이상을 입력하셔야합니다.`)
      : onAdd({ id: "고유한값", text, satus: "active" });
    setText("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Add Todo"
        value={text}
        onChange={handleChange}
      />
      <button>Add</button>
    </form>
  );
}

3번째줄에 { onAdd} 가 어떻게 곧바로 들어갈 수 있는지 이해가 안갔다.  아래와 같은 구조분해할당을 거치지 않았기 때문이다.

const { onAdd } = props;

이에 관해 찾아보니, key와 value가 같을 때 value의 값을 적어주지 않더라도 사용가능한 '단축문법'과 같은 이치로 받아들이면 될 것 같다.

argument:함수를 호출, 사용할때 / parameter:함수를 선언, 정의할때

 

    e.target.value.trim().length === 0 (x)
    text.trim().length === 0 (o)

유효성검사시 event객체가 <form>태그의 자식까지 관여하지않고, <form>태그가 적힌 15번째에서 발생한 이벤트의 객체만 반환하기때문에 아래줄이 올바른 작성코드이다.