[영화 웹 서비스 만들기] #9. To Do List

~7.1까지의 강의

 

엄청 간단한 to-do-list를 만들어 보자.

 

onChange 

const onChange = (event) => setToDo(event.target.value);

input에 값이 Change될 때, 호출되는 함수이다. setToDo에 값이 들어간다고 생각하면 편하다.

이걸 지정하지 않으면, 값이 변해도 내 눈에 보이지 않는다.

 

 

onSubmit

 const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };

toDo가 비어 있으면 그냥 return 한다.

여러개의 toDo를 받기 위해 array를 만들 것이다. 

 

이게 바로

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

추가해서 기본 값이 비어있도록 하자.

todo를 추가할 때, 우리가 가지고 있는 array를 가지고 와서 추가하고 싶다.

일반적인 JS라면 push등을 사용했겠지만, 절대 state를 직접적으로 수정하지 않고, 수정하는 함수를 사용한다!

수정하고 싶으면, 수정하는 함수를 사용해야 한다!

 

수정하는 함수를 사용할 때 두가지 옵션

1. 함수

setToDos는 currentArray를 받아오는 함수가 되었다.

새로운 Array는 state에 있는 todo와 모든 이전의 todo까지 가지게 된다.

 

즉, [toDo, ...currentArray]하면,

앞에 toDo를 추가한다. currentArray를 가지고와서, 앞에 추가하는 것이다.

 

2. 한 개

setToDos("")에서 ""에 저장한 data를 가지고 있다. 

setToDos가 비어있는 string 값으로 불러졌다면, 그건 todo가 비어있는 string이라는 것이다.

 

 

App.js

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

export default App;

이제 return문 안에 있는 것을 분석해보자.

{toDos.length}를 하게 되면, toDos, 즉 Array의 길이를 알 수 있다.

이때, JSX에서 자바스크립트를 넣고 싶으면 {}를 넣어야 한다. 

button이 눌리면, onSubmit이 실행되는 것이다.

input에 value를 입력하면, value는 toDo이고, 

변화는 onChange 함수가 감지한다. 

 

아직까지는 toDos의 길이만 나타내짐

 

---

 

map

array를 가지고 있을 때, 각각의 element들을 바꾸고 싶고, 다 바뀐 새로운 Array를 return한다.

무엇을 return하던지 간에, return한 값이 새로운 Array에 들어가게 된다.

Item을 내가 원하는 값으로 바꿔준다.

 

map(() => A)

()안에 있는 것을 A로 바꿔주는데, 이게 다시 array가 된다.

 

{toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}

즉, 위의 코드는 toDos라는 array안의 item과 index를 <li key={index}>{item}</li> 이 형태로 나타내게 하는데,

이거 자체도 array이다.

 

 

 

전체 코드

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

export default App;