[React JS] 간단한 ToDo리스트 만들기

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;
    }
    setToDos((currentArrary) => [toDo, ...currentArrary]);
    setToDo("");
  };
  return (
    <div>
      <h1>My ToDo List ({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;

input값의 변화를 알 수 있게 onChange함수를 생성, 작성한 값을 알 수 있게 해놓았다.

form에서 submit의 기본값을 제거하기 위해 onSubmit 함수에서 preventDefault적용.

state는 직접적으로 변경이 불가능해서

setToDo = "" 가 아닌

setToDo("") 로 함수를 수정해야 변경이 가능하다.

 

작성값을 제출할 때 toDos 배열을 만들어줘서 보관하게 만듬.

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

처음 배열값은 비어있지만 submit할 때마다 입력했던 value값이 해당 배열에 들어가게 만들어준다.

 

마지막으로 title에서 ({})을 통해 배열값의 길이를 나타내 줄 수 있다.

결과/ 배열안에 3개의 todo value가 있음

이어서 해당 배열값을 출력해보기로 한다.

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

form 하단에 이와같이 입력한다. 여기서 map 함수는 arrary를 가지고 있을 때 각각의 element를 바꿀 수 있다.

map() 에서 ()안에 함수를 넣을 수 있는데 여기서 넣은 함수값은 배열의 모든 element에 대해 실행된다.

[‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’].map(() => “:)”) -> [‘:)’, ‘:)’, ‘:)’, ‘:)’, ‘:)’ ‘:)’] 이런 방식으로 적용

그러나 이런 방식은 전부 동일한 값으로 불러오기 때문에 좋지 않다.

따라서 map의 argument를 item(아무거나 상관없다)으로 한다면, item => item 으로 동일한 배열값이 나온다.

 

출력은 되지만, 콘솔에 고유한 key값이 필요하다고 나온다.

key값은

map의 첫 번째 argument는 값이고 두번째는 index 즉 숫자를 의미함

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

이와같이 변경하면 console에 경고문구가 뜨지 않게된다. (각 배열 item별로 고유한 key를 부여하게됨)

이해가 잘 안된다면 하단 페이지를 참고하자

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

https://velog.io/@chyoon0512/React-map-사용시-key-props를-부여하는-이유

 

 

https://github.com/ge5rg2/react-for-beginners/commit/05038f1db18ea5786c16366a3f8063408d8e3d77

make a ToDoList · ge5rg2/react-for-beginners@05038f1