간단한 to-do List 만들기 (1)

 

1. input만들기

import { useEffect, useState } from "react";

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

export default App;

 

2. input을 form에 넣어주고 버튼 추가하기

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

button을 클릭했을 때 새로고침이 되는 것을 막기위해 onSubmit 함수를 추가하여

event.preventDefault(); 추가

 

3. 엔터 누르면 input 초기화 시키기

  const onSubmit = (event) => {
    event.preventDefault();
    console.log(toDo);
    if (toDo === "") {
      return;
    }
    //setToDo 비우기
    setToDo("");
  };

 

4. 입력 누르면 배열에 추가하기

import { useEffect, 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();
    console.log(toDo);
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    //setToDo 비우기
    setToDo("");
  };

  console.log(toDos);

  return (
    <div>
      <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;

 

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

에서 ...을 붙이지 않으면 배열안에 배열이 들어가기 때문에 반드시 ...을 붙여줘야 해당 배열에 추가가 된다.

 

5. To do List 개수 추가해주기

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