React(9) - ToDoList 만들기

import { useEffect, 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;
    }
    setTodo("");
    setTodos((currentArray) => [todo, ...currentArray]);
  }
  console.log(todos);
  return <div>
    <h1> My To Do ({todos.length})</h1>
    <form onSubmit={onSubmit}>
      <input
        value={todo}
        onChange={onChange}
        type="text"
        required
        placeholder="Write your To Do...">
      </input>
      <button> Save </button>
      <hr />
      {todos.map((todo,index) => <li key={index}>{todo}</li>)}
    </form>

  </div>;
}

export default App;

 

 

state를 직접 수정하지 않고 함수를 통해 수정한다.

const [toDo, setToDo]

toDO = "" -- 이렇게 사용하지 않아

setTodo("")  -- 함수를 수정해서 state를 변경

 

수정할 때 함수를 이용하는 방법은 2가지!

1. 값을 직접 입력하는 방법 setTodo("");

2. 함수를 보내서 입력하는 방법 setToDos ((currentArray) => [toDo, ...currentArray]);

ㄴ 함수 보낼 때 react.js는 현재 state를 첫번째 arument로 보낸다.

ex ) setToDos( [] => [hello, []) === [hello]

       stToDos ( [hello] => [hi, [hello]) === [hi, hello]

 

* array에 새로운 요소 추가

6을 food array에 추가하고 싶은 경우 [6, ...food]

 

 

* map() 기존 array의 요소들을 바꿀 수 있다.

map(함수) - 기존 array 요소 하나하나가 함수에 적용, return된 값이 새로운 array에 들어간다.

                      (기존 array 요소가 4개면 함수 4번 발동!) 

                      기존 요소를 가져와 함수에 적용하고 새로운 array로 변형할 수 있다. 

todos에 있는 요소(item)을 map을 활용해 가져와 각각 <li> 형태로 만들어주면 된다.

 

 

[삭제기능 만들어보기]

<li key={index}>

1. index를 활용해서 삭제가 가능하다. onClick함수로 Index 전달

2. filter함수 사용으로 array 재생성

import { useEffect, 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((currentArray) => [todo, ...currentArray]);
    setTodo("");
  };

  const onClick = (index) => {
    setTodos(todos.filter((item,todoIndex) => index!==todoIndex));
  }

  return (
    <div>
      <h1> My To Do ({todos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          value={todo}
          onChange={onChange}
          type="text"
          placeholder="Write your To Do...">
        </input>
        <button> Save </button>
        <hr />
        <ul>
          {todos.map((item, index) =>
            <li key={index}> {item} <button onClick={() => onClick(index)}>❌</button>
            </li>
          )}
        </ul>
      </form>
    </div>
    );
}

export default App;