React로 간단한 To-Do-List 구현

 

• input 안에 텍스트를 입력하고 submit 하면 하단에 리스트가 추가되는 형식
• title 우측 괄호 안에는 리스트 개수 출력

 

import { useState } from "react";

function App() {
    const [toDo, setToDo] = useState("");
    const [toDos, setToDos] = useState([]);
    const onChange = (event) => setToDo(event.target.value);
    const onSubmit = (event) => {
        event.preventDefault();
        if (toDo === "") {
            return;
        }
        setToDo("");
        setToDos((currentArray) => [toDo, ...currentArray]);
    };

 

• toDo가 비어 있으면 함수가 작동하지 않도록 return을 하고, setToDo("")를 통해 버튼(Add To Do)을 누르면 toDo를 빈 칸으로 만든다.
• toDo를 저장할 배열을 만든다. => const [toDos, setToDos] = useState([]); => form을 통해 submit 이벤트 활용
• setToDos((currentArray) => [toDo, ...currentArray]); => currentArray에 toDo Element 추가

 

return (
        <div>
            <h1>My To Dos ({toDos.length})</h1>
            <form onSubmit={onSubmit}>
                <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do..."></input>
                <button>Add To Do</button>
            </form>
            <hr />
            <ul>
                {toDos.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}
export default App;

 

• map() => 배열 각각의 element에 대해 함수 실행
  • {toDos.map((item, index) => (<li key={index}>{item}</li>))}
  • index를 고유의 key로 가지는 배열이 만들어진다. [{item}, {item}, {item}...]
  • 리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어 고유하게 만들어 주어야 한다.

 

import { useState } from "react";

function App() {
    const [toDo, setToDo] = useState("");
    const [toDos, setToDos] = useState([]);
    const onChange = (event) => setToDo(event.target.value);
    const onSubmit = (event) => {
        event.preventDefault();
        if (toDo === "") {
            return;
        }
        setToDo("");
        setToDos((currentArray) => [toDo, ...currentArray]);
    };
    return (
        <div>
            <h1>My To Dos ({toDos.length})</h1>
            <form onSubmit={onSubmit}>
                <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do..."></input>
                <button>Add To Do</button>
            </form>
            <hr />
            <ul>
                {toDos.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}
export default App;

 

 

reference

https://nomadcoders.co/react-for-beginners/lectures/3286