To Do List 만들기

오늘 처음으로 만들건 To Do List다

import { useState, useEffect } 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]);
  };
  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>
    </div>
  );
}

export default App;

form은 submit 이벤트를 갖고 있다.
그러므로 evernt.preventDefault() 함수를 이용하여 기본 동작을 막아줬다.

또한 빈칸일때 입력이 안되게 return 시켜버렸다.

    if (toDo === "") {
      return;
    }

그 다음 여러개의 toDo를 받아 줄 수 있는 배열을 만들기위해서

const [toDos, setToDos] = useState([]); -> 기본값은 비어있는 배열

다음과 같은 State를 만들어 줬다.

여기서 state는 직접 수정이 불가능하므로 (toDo = "")

함수를 가져와서 수정가능하게 만들어줘야 한다. ( setToDo = (“”))

그래서 toDos 배열을 수정하려면 함수를 만들어줘야한다.

setToDos(currentArray => [toDo, ...currentArray]);

다음과 같은 함수를 만들어 줬다. 여기서 currentArray 앞에 있는 ...이 무엇이냐

만약 ...을 사용 않고 currentArray를 사용했을땐 Array 안에 있는 element들이 아니라

Array(4) 요런식으로 표현되는것이다. 우리가 원하는건 Array 안에 있는 것들이므로 ...를 사용하여 준다.

즉 ...을 사용하여 currentArray 배열에 toDo를 추가 시켜주는 것이다.

어플리케이션이 처음에 시작될 때는 비어있는 배열을 가지고 시작하고

첫번째 to-do를 입력할때 비어있는 currentArray를 받아온다.

전에 입력한 todo에 더해서 비어있는 currentArray에 계속 하여 쌓이게 된다.

타이틀옆에 {toDos.length}를 추가하여 array의 element 개수를 h1 태그를 통해 보여준다.

---

map() 함수
-> 배열을 가지고 있을 때 각각의 element들을 바꿀 수 있게 해줌map() 은 ()에 함수를 넣을 수 있는데 배열의 모든 item에 대해 실행됨
즉 배열에 6개의 item이 있다면 6번 함수가 실행됨
그리고 그 함수로부터 내가 return한 값은 새로운 배열에 들어가게 함

[‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’].map(() => “:)”)
-> [‘:)’, ‘:)’, ‘:)’, ‘:)’, ‘:)’ ‘:)’] 

인 새 배열을 만들어줌
다만 기존의 배열에 접근할 수 없게됨
그러나 map은 함수의 첫 번째 argument로 현재의 item을 가지고 올 수 있음
map(item) -> item이나 원하는 어떤 변수명을 넣으면 item자체를 리턴하는 것도 가능
map((item) => item.toUpperCase())
로 하면 item이 대문자로 바뀐 새로운 배열은 만들어줌

그런데 리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어서 고유하게 만들어줘야한다.

map 함수의 첫번째 argument는 값이고 두번째는 index 숫자를 의미한다.

그리하여

<hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

위 코드와 같이
key={} 안에 index를 넣어 index를 key 값으로 설정하면 unique해진다.

정리를 하자면 우리는 array(toDos)를 가져와서 그 안의 item을 변형하여 li로 출력한것이다.

---

import { useState, useEffect } 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]);
  };
  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>
  );
}

export default App;