07. Practice Movie App - To Do List

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
  const [toDo, setToDo] = useState("");   //setToDo는 toDo값을 수정하는 함수이고, toDo값은 input이랑 연결되어 있음
  const [toDos, setToDos] = useState([]);
  const onChange = (evnet) => {
    setToDo(evnet.target.value);
  };
  const onSubmit = (evnet)=>{
    evnet.preventDefault();

    if(toDo == ""){
      return;
    };

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

  };
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input value={toDo} onChange={onChange} 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;

 

practice-movie-app.z01

19.53MB

practice-movie-app.z02

19.53MB

practice-movie-app.z03

19.53MB

practice-movie-app.zip

12.15MB