toDo pt.1 - state로 배열 추가하기 [...배열]

toDos.push;
toDo = ""

리액트에선 JS에서 하듯 직접적으로 state를 수정해선 안된다.

항상 state를 수정하는 함수✔ 를 사용해야 한다.

toDos의 배열을 수정해주고 싶다면

[...변수]

와 같은 방법을 써야한다.

const food = [1, 2, 3, 4];

에서6 이라는 값을 넣으려면,
즉 6을 포함한 새로운 배열을 만들고 싶다면

[6, food]
// [6, Array(4)] 즉 6과 또다른 배열을 가진 배열

이 아닌

[6, ...food]
// [6, 1, 2, 3, 4]

방법을 써야하는 것이다.

const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);

  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
      // toDo가 빈값이라면 return 해줌으로서 함수를 종료시켜버리기
    }
    setToDo("");
    // submit됨과 동시에 input창 비워주는 것

    setToDos((currentArray) => [toDo, ...currentArray]);
    // currentArray는 현재의 state를 의미. 여기선 현재까지의 toDos를 의미하겟지.
    // 1. 어플리케이션이 시작되면 비어있는 array를 가진다.(toDos)
    // 2. 첫번째 toDo를 입력할 때
    // 3. currentArray는 빈 array, 즉 [] 의 상태이다.
    // 4. 첫번째 toDo는 빈 array와 합쳐진 새로운 toDos가 된다.
    // 5. currentArray는 [첫번째 toDo]
    // 6. 두번째 toDo를 입력하면
    // 7. setToDos함수를 통해 [첫번째 toDo] 에 두번째 toDo가 추가될 것