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가 추가될 것