[ReactJS로 영화 웹 만들기 ]5.To do list 만들기

예전에 바닐라JS로 todo list를 만든 적이 있다.
https://velog.io/@jasmine0714/%EB%B0%94%EB%8B%90%EB%9D%BCJS
HTML, CSS, Javascript 왔다갔다 하느라고 아주 진땀뺐었다.
당시에는 리액트를 몰랐으니 다 만들고 그렇게 뿌듯할 수 없었다.
그런데 오늘의 나,, 리액트로 Todo list만든 오늘의 나,, 굉장히 허무하다.
코드가 이렇게 간단해지다니!

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;

바닐라JS 하다가 리액트JS 하면 신세계라는 카더라는 이럴 때일 수록 와닿는다.
물론 아직 리액트JS를 배워가는 단계이므로 더 익숙해져야 하지만, 익숙해지면 리액트 파워를 숨쉬듯 체험할 수 있을 것 같아 기대가 된다!

중요 뽀인트를 정리해보자.

⭐️

• toDos라는 배열을 useState로 만들고, 새로운 toDo 들을 spread 연산자를 이용하여 추가할 수 있다. 물론 toDos라는 배열로 된 state는 setToDos라는 modifier함수로 바꾼다.

setToDos((currentArray) => [toDo, ...currentArray]);

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

map은 toDos 배열에 있는 item 각각에 대해 함수를 실행시켜주므로, 여기서는 각각의 item의 <li>를 띄워준다.
그런데 만약 key를 빠뜨리면 앱이 실행은 되지만 오류가 뜬다.

Warning: Each child in a list should have a unique "key" prop.

map은 각각의 원소의 index도 받아올 수 있으므로, 위의 코드처럼 key로 index를 받아올 수 있다.

• toDos.length로 toDos의 개수도 띄울 수 있지롱~!

끝! 이제 coin tracker 만들러 슝슝!