[React] 리액트로 간단한 투두리스트 만들기

노마드코더 ReactJS로 영화 웹 서비스 만들기 #7 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 ..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

 

toDo를 input으로 받고, 여러개의 toDo를 받을 수 있는 toDos 배열을 빈 배열로 만든다.

이 때 state는 toDo = "" 이런식으로 직접적으로 수정을 하는 것이 불가능하다. 

setToDo("") 로 함수를 수정하게 해야 한다.

첫번째 toDo를 입력할 때 비어있는 currentArray를 받아오고, 작성한 input값인 toDo를 더해 배열에 값을 더해준다.

자바스크립트 코드를 사용해 toDos 배열의 모든 원소들에 각각 고유한 key 값을 달고, li 태그로 감싸준다.

 

 

 

실행결과