# To Do List

# 간단한 To Do List 작성해보기

1) useState를 이용해서, todo 그리고 setTodo(변경값)을 설정해주기 #1

2) input에서 변화가 있을 때 마다(onChange) #3,
     onChange함수 실행이 되도록 하기 #2

3) form은 submit이라는 이벤트를 가지고 있음 #4-1, #4-2

4) event.preventDefault를 통해서, button의 ADD TO DO를 클릭했을 때, 새로고침이 되지 않게 해줌 #5

5)  .map함수를 통해, placeholder로 지정된 "write your to do"의 내용을 가져올 수 있음 #6

     (<li></li>에는 key값이 필요함)

 

import React, { useState, useEffect } from 'react';

function App(){
  const [todo, setTodo] = useState("");             ------ #1
  const [todos, setTodos] = useState([]);
  const onChange = (event) => {
        setTodo(event.target.value)                 ------ #2
  }
  const onSubmit = (event) => {                     ------ #4-1
    event.preventDefault();                         ------ #5
      if(todo === ""){
      return;
    }
    setTodos((currentArray) => [todo, ...currentArray]);
    setTodo("");
  }
  console.log(todos);
    return<div>
        <h1>To Do list({todos.length})</h1>
        <form onSubmit={onSubmit}>                  ------ #4-2
        <input                                      ------ #3
	onChange={onChange} 
   	value={todo} 
	type="text" 
	placeholder="write your to Do..."
	/>
        <button>ADD TO DO</button>
        </form>
        <ul>

        {todos.map((item, index)=>                 ------ #6
          <li key={index}>{item}</li>)}
          
        </ul>
    </div>
}
  
export default App;