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번째에서 발생한 이벤트의 객체만 반환하기때문에 아래줄이 올바른 작성코드이다.
react-icons라이브러리
yarn add react-iconshttps://react-icons.github.io/react-icons/search?q=trash
import { HiTrash } from "react-icons/hi";
<HiTrash />⚠️import할때 react-icons/뒤에 사용하고자하는 아이콘의 접두사를붙여줄것.
