0608

공부내용 한줄 요약
reacJS state로 투두리스트 만들기

state는 함수를 통해서만 수정할 수 있다. toDos.push 등 사용 X
form 안의 input value를 state값에 연결하고, form이 submit될 때마다 다른 state값(빈 배열)에 value를 추가한다. 사용자에게 배열을 보여준다.(react이므로 자동으로 re-rendering됨)

• map(f): array에 대해 각각 function 실행하는 함수. 첫번째 인자는 진행순서에 맞는 요소, 두번째 인자는 index.
  ex) ['hi', 'hello'].map((todo) => todo.toUpperCase())
  
  
• reactJS는 li를 렌더링 할 때 unique한 key값을 필요로 한다.
  toDos.map((item, index) => <li key={index}>{item}</li>)

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; //투두가 비어있다면 함수 작동 X
    }
    setToDos((currentArray) => [toDo, ...currentArray]); // currentArray의 모든 요소를 불러온다 - array 안에 array를 추가하는 대신
    setToDo("");
  };

return (
  <div>
    <h1>할 일({toDos.length})</h1>
    <form onSubmit={onSubmit}>
      <input
        onChange={onChange}
        value={toDo}
        type="text"
        placeholder='할 일을 입력하세요.'
      />
      <button>할 일 추가</button>
    </form>
    <hr />
    <ul>
      {toDos.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
  </div>
  )
}

export default App;

Comment
바닐라js로 todo list를 만들었던 것처럼 local storage에 todolist를 저장하거나 db를 사용해보자.