📌 지금까지 배운 개념으로 to do list 만들어 보기

지금까지 배운 useState, useEffect, props 등의 개념을 이용하여 간단하게 todo list를 만들어 볼 것이다.

1. 할 일을 적는 입력란을 만들기 위해 input을 생성하였고, input의 상태를 관리하기 위해 toDo 변수와 modifier인 setToDo를 생성해 주었다.

import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState(""); // 주목!
  return (
    <div>
      <input type="text" placeholder="Write your to do ..." /> {/*주목!*/}
    </div>
  );
}

export default App;

2. input에 onChange eventlistener를 추가하여 input의 값이 바뀔 때마다 onChange 함수가 실행되도록 하였다.

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value); // 주목!
  console.log(toDo); // 주목!
  return (
    <div>
      <input
        onChange={onChange} // 주목!
        type="text"
        placeholder="Write your to do ..."
      />
    </div>
  );
}

onChange 함수는 setToDo 함수에 input의 입력값이 변할 때마다 그 값을 인자로 전달해 상태를 업데이트하는 함수이다.

console.log(toDo)로 인해 console창에 input의 값이 바뀔 때마다 그 값이 계속 뜨는 것을 볼 수 있다.

3. input을 form에 넣는다.

function App() {
  .....
  return (
    <div>
      <form>
        <input
          onChange={onChange}
          type="text"
          placeholder="Write your to do ..."
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

Add To Do 버튼도 같이 만들어 줬는데, 버튼을 누르면 form의 submit 이벤트를 발생시키도록 할 것이다.

function App() {
  .....
  const onSubmit = (event) => {     // 주목!
    event.preventDefault();
    console.log(toDo);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>     // 주목!
  .....

버튼을 클릭하는 것이 form이 submit되는 것이고, form이 submit 되면 기본 동작을 막고, submit 시점의 toDo를 console창에 띄우는 코드를 작성하였다.

이제 여기에서 toDo가 빈 문자열일 경우 함수가 작동하지 않도록 할 것이다. (return 작성)

이어서 빈 문자열이 아닌 값 입력 완료 시 input을 비울 것인데, 이것은 setToDo 함수의 인자로 ''를 전달하여 현재 state를 업데이트할 것이다.

function App() {
  .....
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {     // 주목!
      return;
    }
    setToDo("");     // 주목!
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={toDo}
          .....

결과로 어떤 값을 입력란에 입력하여 제출하든 빈 값으로 초기화되는 것을 볼 수 있다.

4. 여러 개의 toDo를 받을 수 있는 array를 생성한다.

이를 위해 다른 state인 toDos 변수를 생성해 주었고, 그의 modifier로 setToDos 함수를 생성해 주었다.

배열로 만들어야 하므로 초기 상태는 빈 배열로 설정해 주었다.

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  .....

일반 자바스크립트에서는 배열에 값을 추가하고 싶을 때 toDos.push(value) 이런 식으로 진행하였다.

하지만 React의 State는 값을 직접적으로 수정할 수 없다는 것을 기억해야 한다. (constant이기 때문)

따라서 지금까지 계속 해왔듯이 modifier 함수인 setToDos를 사용한다.

modifier 함수는 첫번째 argument로 현재의 state를 받아올 것이다. 우리가 원하는 것은 기존 toDos array의 원소들에 toDo를 더한 새로운 배열을 생성하는 것이므로 전개연산자를 이용해 코드를 작성한다.

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);     // 주목!
    setToDo("");
  };
  .....

결론적으로 push와 같은 효과를 내게 된다.

5. 제목을 생성하고 그 제목에 할 일의 개수도 같이 띄운다.

할 일들은 모두 toDos 배열에 원소로 저장되어 있고, 이 배열의 길이가 곧 할 일의 개수이다.

.....
return (
  <div>
    <h1>My To Dos ({toDos.length})</h1>
.....