[TIL] ReactJS - TO DO LIST (feat. map)

오늘 공부한것 & 기억하고 싶은 내용

useState(), useEffect(), props 등 간단한 리액트 이론 강의를 다 들었다.
이제 예제를 만들어보면서 복습만이 답이다.. 하다보면 이해하지 못했던 것들을 언젠가는 당연하게 쓰고 있는 날이 오겠지..

간단하게 To Do List를 만들어보았다.
1. input을 만들어서 값을 입력하고 그 입력값이 변경될 때마다 상태가 업데이트가 되기 때문에 useState를 사용해서 관리해준다.
2. input을 form으로 감싸고 입력된 값을 엔터 혹은 버튼 클릭 시 리렌더링 시켜준다. 여기서 button은 submit의 기능을 하고 있기 때문에 event.preventDefault()를 사용해 페이지가 새로고침 되지 않도록 처리해준다.
3. 담을 그릇을 만들어준다. 두번째 useState, 이건 배열로 만들어준다.useState([])
4. 만들어진 배열 안에 입력된 toDo의 값들을 차례대로 넣어준다.(구조분해 할당 이용 - setToDoList((currentArray) => [toDo, ...currentArray]);
5. 배열 안에 담긴 데이터들을 map함수를 이용해서 li로 렌더링해준다. (input 입력 후 엔터치면 li요소로 데이터 나옴)

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDoList, setToDoList] = useState([]);

  const onChange = (event) => {
    setToDo(event.target.value);
  };
  const onSubmit = (event) => {
    event.preventDefault(); // 새로고침 되는 submit 기능 막기
    if (toDo === "") {
      return; //이 함수를 작동하지 않게 만듦
    }
    setToDoList((currentArray) => [toDo, ...currentArray]);

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

export default App;

배운점 & 느낀점

배운 useState를 이용해서 간단하게 투두리스트를 만들어보았다.
다음 시간에는 여기에 데이터 삭제버튼과 중복된 데이터일때는 에러를 발생시키는 코드를 추가해봐야겠다.