[ReactJS] Practice To Do List - ReactJS 로 영화 웹 서비스 만들기 (7)

 

본격적으로 Movie App 을 만들기 전에

두 가지 실습을 진행한다.

첫 번째는 To Do List 만들기!!

 

 

---

 

 

#7.0-7.1 Practice To Do List

 

input 에 입력하는 값들의 list 를 보여주기

 

 

toDo, toDos 생성

const [toDo, setToDo] = useState("");
const [toDos, setToDos] = useState([]);

 

toDo : 현재 입력받는 값

toDos : 입력받은 toDo 들의 총 집합

 

 

화면에 그려지는 부분

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

 

h1 > 제목에는 toDos 의 길이도 함께 출력

 

form > input & submit button

- input 값이 변할 때마다 onChange

- 버튼 클릭 시 onSubmit

 

ul > map 을 이용해 toDos 리스트 출력

- map => 배열의 아이템 만큼 새로운 배열을 만들어서 return
첫 번째 argument 로 item, 두 번재 argument 로 index 를 가져옴
ex) ["a", "b", "c"].map((item) => )

 

- 여기서 만약 key 프로퍼티가 없을 경우, warning

map 으로 만든 element 들은 key 를 꼭 가져야한다.

또한 key 값은 각 element 마다 고유한 값으로 가져야함

=> 적절한 게 없다면 index 이용

 

onChange

const onChange = (event) => setToDo(event.target.value);

 

현재 입력된 값 event.target.value 로 update

 

 

onSubmit

const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDo("");
    setToDos((currentArray) => [toDo, ...currentArray]);
};

 

event.preventDefault() 로 새로고침 방지

 

toDo 가 빈 문자열이라면 추가할 필요가 없으므로 return

 

toDo 를 toDos 에 저장하고

toDo 는 빈 문자열로 초기화

 

toDos 를 update 할 때는 setToDos 를 이용한다.

=> array 를 직접적으로 수정하지 않고 함수로 element 를 추가

 

기존 배열에 새로운 값 합치기

 

예시

const food = [1, 2, 3, 4];

 

에 6을 추가하고 싶을 때

 

[6, food] => [6, Array(4)]	// (X)
[6, ...food] => [6, 1, 2, 3, 4]	// (O)

 

... 을 이용하자

 

전체 코드

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;
    }
    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..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {
          toDos.map((item, index) => (
            <li key={index}>{item}</li>
          ))
        }
      </ul>
    </div>
  );
}

export default ToDoList;

 

 

핵심

1. state 를 변경할 때는 직접적으로 변경하지 않고 useState 함수를 사용해 변경해야한다.

2. map 을 이용한 element 생성은 key 프로퍼티가 필수적이다.

 

 

---

 

 

이렇게 간단한 To Do List 만들기 성공!!

삭제 버튼 등 다른 기능들은 자유롭게 추가해도 될 것이다.

useState 에 대한 좋은 실습이 되었다.