TIL 26. React로 TodoList만들기

오늘부터 React를 배우게 됐다.
배운걸 기반으로 TodoList를 만들어봤다. (개인과제이기도 하다.)

---

아래 코드는 todolist의 추가, 삭제, 확인 코드다.

  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const [toDos, setToDos] = useState([]);

  const onChangeTitle = (event) => setTitle(event.target.value);
  const onChangeBody = (event) => setBody(event.target.value);

  const onSubmit = (event) => {
    event.preventDefault();
    if (title === '' || body === '') {
      return;
    }

    setToDos((currentToDos) => [
      { id: Date.now(), title: title, body: body, isDone: false },
      ...currentToDos,
    ]);
    setTitle('');
    setBody('');
  };
  const confirmToDo = (event) => {
    const confirmToDos = toDos.map((item) => {
      if (item.id == event.target.parentElement.id) {
        return { ...item, isDone: !item.isDone };
      } else {
        return { ...item };
      }
    });
    setToDos(confirmToDos);
  };

  const deleteToDo = (event) => {
    const deleteToDos = toDos.filter(
      (item) => item.id !== parseInt(event.target.parentElement.id)
    );
    setToDos(deleteToDos);
  };

• 사용자가 입력한 title과 body는 setTitle, setBody의 값을 바꾸고 그 값은 title, body가 되어서
  setToDos의 id, isDone과 같이 toDos에 들어간다.
  그리고 toDos의 담긴 값들이 맨 아래의 코드에 들어가, 화면에 그려진다.
  화면에 그려질 때, isDone이 false면 To Do List에, true면 Confirm List에 그려진다.

• 삭제는, filter를 사용해서 toDos의 값을 하나하나 꺼내왔으며,
  꺼내온 값의 id와 클릭한 리스트의 id값이 '일치하지 않은 값'들만 모아서
  deleteToDos라는 변수에 새로운 배열로 담았고, 그 배열을 setTodos에 덮어씌웠다.

• 확인은 map을 사용해서 toDos의 값을 하나하나 꺼내왔으며,
  꺼내온 값의 id와 클릭한 리스트의 id값이 같으면, 꺼내온 값의 isDone을 부정이 되게 만들고
  나머지 값들을 ...(전개연산자)를 사용해서 가져온 후 return했다.
  그리고 꺼내온 값의 id와 클릭한 리스트의 id값이 같지 않은 것들은 꺼내온 값 그대로 리턴하게 했다.
  리턴한 값을 setToDos에 넣었다.

---

<form onSubmit={onSubmit} className="todo-form">
  <input
	onChange={onChangeTitle}
    value={title}
    type="text"
    placeholder="title"
    />
  <input
   	onChange={onChangeBody}
    value={body}
    type="text"
    placeholder="body"
    />
  <button>Add To Do</button>
</form>

form 태그

---

<div className="todo-list">
        To Do List
        <ul>
          {toDos.map((item) => {
            if (item.isDone == false) {
              return (
                <div id={item.id} key={item.id}>
                  <div>{item.title}</div>
                  <div>{item.body}</div>
                  <button onClick={confirmToDo}>
                    {!item.isDone ? '확인' : '취소'}
                  </button>
                  <button onClick={deleteToDo}>삭제</button>
                </div>
              );
            }
          })}
        </ul>
      </div>
      <div className="confirm-list">
        Confirm List
        <ul>
          {toDos.map((item) => {
            if (item.isDone == true) {
              return (
                <div id={item.id} key={item.id}>
                  <div>{item.title}</div>
                  <div>{item.body}</div>
                  <button onClick={confirmToDo}>
                    {!item.isDone ? '확인' : '취소'}
                  </button>
                  <button onClick={deleteToDo}>삭제</button>
                </div>
              );
            }
          })}
        </ul>
      </div>
    </div>

랜더링되는 부분