[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를 이용하여 배열과 함수를 만들어 보겠습니다.

onChange 함수를 통해 이벤트가 발생시 setToDo함수를 이용해 toDo의 값을 입력받은 값으로 넣어줍니다.


onSubmit 함수를 실행하면, event.preventDefulat를 통해 form이 submit될때 제출시 새로고침 하는 속성을 막습니다.


setToDo 함수를 통해 toDo 변수의 값을 없애고, setToDos 함수를 통해 또다른 함수를 실행시킵니다.

[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;

전체 코드는 이렇습니다.