[React] 리스트 추가하고, 클릭시 제거하기 / map, filter

리스트를 추가하고 클릭시 제거하는 UI를 만들어보자. 
(TODO LIST를 만들어보자~~!)

 

useState

현재 책 리스트를 담을 books Array와, 새로운 book Object를 초기값으로 넣어준다.
id는 유니크한 값으로 넣어준다. Book은 id, title, author을 가지고있다.

 

const [books, setBooks] = useState([
    { id: 1, title: "1984", author: "George Orwell" },
    { id: 2, title: "Lord of the Flies", author: "William Golding" },
    { id: 3, title: "Catcher in the Rye", author: "J.D Salinger" },
  ]);
const [bookForm, setBookForm] = useState({
    id: Number(new Date().getTime()),
    title: "",
    author: "",
});

 

HTML

책 이름과 저자명을 적을 인풋2개를 만들어준다.
책을 입력하고 리스트에 추가할 추가 버튼을 만들어준다.
기존의 책 리스트인 books를 map을 돌려 리스트를 뿌려준다.
클릭시 해당 항목을 삭제할수있도록 리스트에 onClick을 달아주고, remove함수에는 인덱스값을 넘긴다.

 

<div>
    <div className="base-input-wrap">
      <input type="text" name="title" value={bookForm.title} className="base-input" onChange={onChangeInput} placeholder="책 제목을 입력하세요" />
      <input
        type="text"
        name="author"
        value={bookForm.author}
        className="base-input"
        onChange={onChangeInput}
        placeholder="작가 이름을 입력하세요"
      />
      <button className="base-btn mt10" onClick={addBookList}>
        추가
      </button>
    </div>
    <ul className="mt10 ml10 font16">
      {books.map((item, index) => (
        <li key={item.id} onClick={() => removeBookList(index)}>
          {item.title} - {item.author}
        </li>
      ))}
    </ul>
</div>

 

setState

기능을 추가한다

 

 const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name } = e.target; // e.target에서 name을 꺼냄
    const newBookTemp = { ...bookForm, [name]: e.target.value, id: Number(new Date().getTime()) };
    setBookForm(newBookTemp); // 새로운 책 객체를 setState
  };
const addBookList = () => {
    setBooks([...books, bookForm]); // 추가버튼 클릭시 기존 Array에 새로운 obj 추가
    setBookForm({ // 인풋 초기화
      id: Number(new Date().getTime()),
      title: "",
      author: "",
    });
    };
const removeBookList = (index: number) => { // 클릭시 받은 index 항목만 제외한 배열을 books에 setState
    const removedBookList = books.filter((_, i) => {
          return i !== index;
        });
    setBooks(removedBookList);
};