To Do List

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다.

 

---

코드

import { useState, useEffect } from "react";

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;
    }
    setToDo("");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        ></input>
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

 

 

현재 위 코드에서 toDo에 저장된 값을 toDos 배열에 추가하는 작업을 수행하려 한다.

 

일반적인 JavaScript라면 toDos.push(toDo)만 수행하면 간단히 해결될 문제이다.

 

하지만 여기서 toDos는 state이기 때문에 직접적으로 수정하지 않는 것이 좋다.

 

즉, setToDos 함수를 사용해 toDos 배열에 element를 추가하는 방법에 대해 알아야 한다.

 

이를 위해 다음과 같은 방법을 사용한다.

 

 

보다시피 현재 food라는 배열에 6이라는 element를 추가해 새로운 배열을 생성하려 한다.

 

그러나 [6, food]와 같이 작성하면 [6, Array(4)]라는 결과가 나오는데 이것은 우리가 원하는 결과가 아니다.

 

우리가 원하는 결과를 얻기 위해서는 [6, ...food]와 같이 작성해야 한다.

 

적용 코드

import { useState, useEffect } from "react";

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("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        ></input>
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

 

적용 결과

 

 

동작 방식은 간단하다.

 

setState 함수의 인자로 함수를 작성할 때 react.js는 함수의 첫 번째 인자로 현재 state를 보낸다.

 

그리고 이 현재 state를 계산하거나 새로운 state를 만드는 데 사용할 수 있게 된다.

 

---

To Do List 출력

 

코드

import { useState, useEffect } from "react";

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("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        ></input>
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

결과 화면

 

 

정상적으로 출력되는 것을 확인할 수 있다.

 

하지만 콘솔창을 확인해보면 다음과 같은 경고가 나타나는 것을 확인할 수 있다.

 

기본적으로 List를 render 할 때 key라는 prop을 작성해줘야 한다.

(이때 key는 고유한 값이어야 한다.)

 

key값을 작성하기 전에 map() 함수에 대한 설명을 살펴보도록 한다.

map 함수의 첫 번째 파라미터는 value 여야 하고, 이건 각각의 toDo를 의미한다.

 

두 번째 파라미터는 index이다. (ex. 0, 1, 2, 3, 4, ...)

 

이러한 index를 사용해서 List에 key 값을 작성해주도록 한다.

 

key값 추가