[React] 간단한 To Do List 만들어보기

	const [toDo, setToDo] =useState("");
    const [toDos,setToDos] = useState([]);
    const onChange = (event) => setToDo(event.target.value);
    const onSubmit = (event) => {
        event.preventDefault();
        if(toDo === ""){
            return ;
        } //form 은 submit의 속성을 가지고 있기때문에 제출시 새로고침된다. 이를 막기 위해
        setToDo("");
        setToDos((currentArray) => [toDo, ...currentArray]); //단순히 값을 보내는 것이 아니라 함수를 보내는 방법 // 현재의 toDos를 받아와서 새로운 toDo를 추가한 array로 return 한다.
    };

useState를 이용하여 배열과 함수를 만들어 보겠습니다.

[toDo,...currentArray] 현재의 toDos를 받아와서 새로운 toDo를 추가한 array로 return 하게끔 합니다.

여기서 ...은 비구조화 할당 구문으로 불리는 자바스크립트 표현식입니다.

비구조화 할당 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다. -> 즉, 배열[], 혹은 객체{} 안의 값을 편하게 꺼내 쓸 수 있도록 한다.

import { useState , useEffect } from "react";

function ToDoList() {
    const [toDo, setToDo] =useState("");
    const [toDos,setToDos] = useState([]);
    const onChange = (event) => setToDo(event.target.value);
    const onSubmit = (event) => {
        event.preventDefault();
        if(toDo === ""){
            return ;
        } //form 은 submit의 속성을 가지고 있기때문에 제출시 새로고침된다. 이를 막기 위해
        setToDo("");
        setToDos((currentArray) => [toDo, ...currentArray]); //단순히 값을 보내는 것이 아니라 함수를 보내는 방법 // 현재의 toDos를 받아와서 새로운 toDo를 추가한 array로 return 한다.
    };
    console.log(toDos);
    return <div>
        <h1>My To Dos ({toDos.length})</h1>
        <form onSubmit={onSubmit}>
            <input onChange={onChange} 
            value={toDo} 
            type="text" 
            placeholder="Write your to do..."/>
            <button>Add To Do</button>
        </form> 
        <hr />
        <ul>
        {toDos.map((item,index)=>(
            <li key={index}>{item}</li>))}
        </ul> 
        
    </div> //map의 첫번째 argument인 item은 toDo를 의미한다. todos를 가져와서 map 함수를 통해 item들을 li로 바꿔줌
}

export default ToDoList;

전체 코드는 이렇습니다.