스파르타코딩 내일배움캠프 DAY 25 TIL - 리액트로 Todo 리스트 만들기

리액트로 Todo 리스트 만들기를 해보도록 할게요.

원래 숙제는 추가를 넘어 삭제와 수정까지 였지만... 도저히 추가 이상으로는 구현이 힘들어서 일단은 추가 까지 정리를 해보도록 할게요.

일단 가장처음에는 인풋 창을 2개 만들어줍니다.
사셜 여기까지 만드는건 기본적인 css와 HTML을 했다면 금방 만들 수 있지요

다음으로는 각각의 인풋과 버튼에 기능을 넣어줘야 합니다.
바로 함수를 통해서요.

우선 onChange={onChangeTitle}의 경우, 해당 input에 값을 입력하면 내용 변화를 감지해주는 함수입니다. 아래처럼, event와 event.target.value를 통해서 setTitle 값에 넣어주면 됩니다.

  const onChangeTitle = (e) => {
    setTitle(e.target.value);
    console.log("제목", title);
  };

그러면 여기서 setTitle이 어떻게 나온건지도 살펴보도록 할게요.

const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

바로 title이란 변수?를 변경시키기위해 setTitle을 함수를 이용해야 합니다.
저도 이부분이 처음에는 이해가 잘 안갔는데, 그냥 무지성으로 계속 사용을 해보니깐 얼추 이해가 가더라구요.

고로

title과 setTitle을 이용해 제목 input을 변경해주고.
content와 setContent를 이용해서 내용 input을 변경해주면 됩니다.

<button onClick={onClickBtn} >추가</button>

자 그리고 마지막인 버튼이 남아있습니다.
이 버튼을 통해서 제가 인풋에 적었던 내용들을 화면에 랜더링 해줘야 합니다.

---

그 전 에, 내가 적었던 인풋이 그냥 쉽게 입력하면 화면에 나오는게 안니더라구요.
바로 어떤 한 배열([])에 담은 다음에 화면에 보여줘야 합니다.

  const [item, setItem] = useState([]);

바로 여기 item과 setITem을 통해서 내가 input에 적었던 글을 담아주시면 됩니다.

---

여기서 아까 위에 버튼에 추가했던 onClick 버튼의 함수를 꾸며보도록 할게요.

  const onClickBtn = () => {
    setItem([
      ...item,
      {
        title: title,
        content: content,
      },
    ]);
  };

이제 여기서 setItem을 통해 해당 값들을 변경하여 Item에 넣어주면 됩니다.
다.만. ...item 이라던지 갑자기 왜 { title:title, content:content}가 나오는지 조금 이해가 안되실 거에요. 사실 저도 지금 100% 이해가된건 아니지만, 그래도 아래 사진을 보신다면 얼추 이해가 되실 거에요.

---

...item이 쉽게 말해서 기존의 내용에다가 덧 붙이는 방식이라고 보시면 될 것 같아요.
대괄호를 해제 시켜주고, 내용을 추가하고 다시 대괄호를 넣는 방식이라고 보시면 됩니다.
여기서 console.log(item)을 찍어보면 객체 안에 들어가있는게 보이실 거에요.

고로
setItem([...item,{title : title, content:content} ]) 를 넣어주셔야 합니다.
여기는 제가 더 이해를 하고 난 후 다시 덧붙여서 글을 써야 겠네요.

---

이제 item에 제가 input에 입력했던 값이 들어갔습니다. 이제 그 값을 TodoBoard.js로 옮긴다음 랜더링을 해보도록 할게요.

우선 App.js에서
item 과 map을 사용해보도록 할게요.

 {item.map((item) => (
        <TodoBoard 똥={item} />
      ))}
아까 위에서 item으로 넣은 값을. map 함수를 통해 다시뿌려야 합니다.

item.map((인자로 item을 주고) => ( 여기에서 TodoBoard로 이동하는 포탈을 열어보자.
<TodoBoard 똥 ={item} 을 주면 된다./>)

---

이제 TodoBoard.js로 돌아가보자

import React from "react";

const TodoBoard = ({ 똥 }) => {   -> 아까 받아온 똥을 {똥}으로 사용하면 된다. 사실 props도 가능하지만 오늘은 똥으로 해보자.
  return (
    <div>
      {똥.title}   -> 원래 같으면 {똥} 만 하면 끝일줄 알았는데.. {똥}은 객체 형태로 이루어져 있어서. title과 content 값을 꺼내려면 똥.title, 똥 .content처럼 꺼내줘야 렌더링이 가능하다.
      {똥.content}
    </div>
  );
};

export default TodoBoard;

결과물로 이렇게 제목과 할일을 추가하면 TodoList가 나온다.