[React] Movie-app Notes - Mini Apps (1) To Do List

📒 Nomad Coder ReactJS로 영화 웹 서비스 만들기
강의노트 (2021 Updated ver.)

---

# 8. To Do List

state는 절대 직접적으로 수정하지 않는다. useState()를 이용해 수정한다.

import React from "react";
import { useState, useEffect } from "react";

function App() {
    const [toDo, setToDo] = useState("");
    const [toDos, setToDos] = useState("");
    const onChange = (e) => setToDo(e.target.value);
    const onSubmit = (e) => {
        e.preventDefault();
        if (toDo === "") {
            return;
        }
        setToDos((curArry) => [toDo, ...curArry]); // 배열에 현재 state값을 추가해줌
        setToDo("");
    };
    console.log(toDos);

    return (
        <div>
            <h1>TO DOS ({toDos.length})</h1>
            <form onSubmit={onSubmit}>
                <input
                    type="text"
                    placeholder="WRITE YOUR TO DO"
                    value={toDo}
                    onChange={onChange}
                ></input>
                <button>add</button>
            </form>
        </div>
    );
}

export default App;

toDos Array에 있는 모든 값을 각각 하나의 컴포넌트로 생성하기

import React from "react";
import { useState, useEffect } from "react";

function App() {
    const [toDo, setToDo] = useState("");
    const [toDos, setToDos] = useState([]); // 여길 배열로 입력하지 않고 ""로 입력해서 map에 오류가 남. 배열로 인식을 못 해서..
    const onChange = (e) => setToDo(e.target.value);
    const onSubmit = (e) => {
        e.preventDefault();
        if (toDo === "") {
            return;
        }
        setToDos((curArry) => [toDo, ...curArry]); // 배열에 현재 state값을 추가해줌
        setToDo("");
    };
    console.log(toDos);

    return (
        <div>
            <h1>TO DOS ({toDos.length})</h1>
            <form onSubmit={onSubmit}>
                <input
                    type="text"
                    placeholder="WRITE YOUR TO DOs"
                    value={toDo}
                    onChange={onChange}
                ></input>
                <button>add</button>
            </form>
            <hr />
            <ul>
                {toDos.map(
                    (
                        item,
                        index //map의 함수
                    ) => (
                        <li key={index}>{item}</li> //React에서 list에 key값을 요구함
                    )
                )}
            </ul>
        </div>
    );
}

export default App;