To Do List (react기초)

Todo list 만드는 게 기초라니 참.. 당황스럽고 어이없죠?

저도 그래요 이해 하는데 시간이 굉장히 걸리네요 :(

 

이제 제가 이해한걸 여러분에게 말씀드려볼게요

일단 전체 코드는 이것이고 밑에 설명 넣어두겠습니다.

import React, { useState } 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;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };
  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 TodoList;

 

function TodoList() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
     event.preventDefault();}
  return (
    <div>
      <h1>My To Dos({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="Text"

먼저 useState로 빈 문자열이랑 배열을 설정해줍니다.

다음 return 아래로 넘어가면 이제 JSX 라인이라는 거 아시죠?

 

자바스크립트에서 JSX로 값을 가져오기 때문에 일단 중괄호{}를 넣었고, onSubmit이라는 이벤트를 주는 이유는 이런 제출 이벤트를 하지 않는다면 버튼을 눌렀을 때 자동으로 새로고침이 발생하기 때문에 onSubmit이벤트로 그런 현상을 방지한 것입니다.

 

다음으로 onChange 이벤트인데요 이건 내가 작성하는 문서를 그대로 웹에서 받아들여질 수 있도록 만들어진 이벤트입니다.

그래서 input 안 value에다가 내가 내가 onChange로 실행할 초깃값(toDos)을 넣어주고 onChange 함수 이벤트 라인에는 변경 가능한 set ToDo로 (event.target.value)를 찍어주면 작성하는 값이 찍히게 됩니다.

 

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

자~ 마지막 설명입니다.

if 만약에 전송 이벤트 Submit을 진행했을 때 사용자가 아무것도 입력하지 않았다면 다시 리턴해서 todolisst작성이 되지 않도록 설정해 놓았고, SetTodos는 배일이기 때문에 currentArray(현재의 배열)에서 [todo,... currentArray]로 하면서 todo가 증가함에 다라서 toDos와 currentArray의 몸집은 커지겠죠?

 

그럼 오늘도 읽어주셔서 감사합니다!