react 로 간단한 Todo List 만들기

a.map(함수) 은 a 배열의 모든 요소들을 하나씩 돌며 함수 실행. 이때 함수에 파라미터가 이 요소가 됨.

function App() {
  const [todo, setTodo] = useState("");
  const [todos, setTodos] = useState([]);
  function onChange(e) {
    setTodo((d) => d = e.target.value)
  }
  function onSubmit(e) {
    e.preventDefault();
    if (todo === "") {
      return
    }
    setTodos((currentArr) => [todo, ...currentArr]);
    setTodo((d) => d = "");
  }
  console.log(todos);
  

onChange 함수는 input 의 값을 가져오는 함수.input의 value들을 하나하나씩 e.target.value를 이용해 가져와서 사용해야함.
onSubmit 함수는 form이 submit 됐을 때 실행되며, todo 가 없을 땐 실행되지 않고, todo arr에 todo를 추가해 준 후 input 안의 값을 비워준다.

만약, console.log가 onSubmit 안에 있으면 setTodos 하기 전에 상태가 콘솔에 찍히게 되어 todo가 추가가 안된것처럼 나온다.
-> 이유 : setState 는 배치(Batch) 기능을 사용해 비동기로 작동하기 때문. 상태는 변경될때마다 리렌더링 되기 때문에 비동기로 처리해줘야 부하가 없다.

return (
  <div>
    <h1>My Todos({todos.length})</h1>
    <form onSubmit={onSubmit}>
      <input value={todo} onChange={onChange} type="text" placeholder="Write your to do..." />
      <button>submit</button>
    </form>
    <ul>
      {todos.map((item, index) =>
      (<li key={index}>{item}</li>
      ))}
    </ul>
  </div>
);
}

react 는 innerHtml 이런거 없이 바로 태그를 넣을 수 있다.
jsx에서 return 할 때는 한 부모만 가능.(만약 h1태그가 div 밖으로 나오면 오류남.)