[React] To Do List

▷ To Do List 

• 할 일 생성 (Enter 또는 button 제출)

// App.js
import styles from "./App.module.css"
import { useState } from "react";


function App(){

  // setToDo는 toDo값을 변경하는 함수
  // toDo는 input태그와 연결되어있다
  const [toDo, setToDo] = useState("")
  
  // toDos는 이전의 투두 기록을 가지고 있는 배열 상태, 기본값으로 빈배열 설정함
  const [toDos, setToDos] = useState([]) 
  
  // onChange함수는 입력 요소에서 입력 이벤트가 발생했을 때 호출된다
  // 'event.target.value'를 통해 사용자가 입력한 값을 가져와서 
  // 'setToDo'함수를 사용하여 'toDo'상태를 업데이트한다
  const onChange = (event) => setToDo(event.target.value)
  
  // onSubmit은 폼이 제출되었을 때 실행
  const onSubmit = (event) => {
    event.preventDefault() // form 제출 방지 (form이 제출하면 새로고침됨)

    if (toDo === ""){ // input이 비어있다면 onSubmit 함수 실행 중지
      return 
    }
    
    // input 입력칸이 비어있지 않다면! setToDos 함수를 통해 toDos배열 업데이트
    // 현재 할 일(toDo) + 이전 할 일(currentArray)들을 하나의 배열로 만들기
    // currentArray는 toDos가 가지고 있는 배열을 나타낸다.
    setToDos(currentArray => [toDo, ...currentArray])
    
    // input에 입력 후 input칸 비우는 역할 -> toDo변수를 빈 문자열로 업데이트
    setToDo("")
  }
    // 삭제 버튼 구현
    const deleteBtn = index => {
    // curTodos배열은 현재의 todos상태를 나타낸다. 
    // curTodos.filter(...)를 사용하여 curTodos배열을 필터링한다. 
    // (_, curIndex) => curIndex !== index)은 현재 인덱스 curIndex가 index와 다를 때만 해당 항목을 유지하도록 필터링한다.
    // 다시말해, index와 일치하는 항목은 필터링을 통해 제거된다. 
    // 이렇게 필터링된 새로운 배열은 setTodos를 사용하여 todos상태를 업데이트 한다.
    setTodos(curTodos => curTodos.filter((_, curIndex) => curIndex !== index))
    }
  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 type="submit">Add To Do</button>
      </form>
      <hr/>
      <ul>
        {/* li태그는 리스트 아이템을 식별하기 위해 고유한 key 식별자가 필요하다 */}
        {/* li가 생성될 때 각 li에 번호를 매겨 구별할 수 있도록! */}
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
          {/* 버튼을 클릭하면 deleteBtn함수가 실행되는데 이때, index매개변수로 현재 버튼이 몇 번째로 렌더링되었는지의 인덱스가 전달된다. */}
          <button onClick={() => deleteBtn(index)}>❌</button>
        ))}
      </ul>
    </div>
  )
}

export default App;

코드 설명은 주석 참고↑

 

// index.js
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'))
root.render(<App tab="home" />)

https://react.dev/reference/react-dom/client/createRoot

createRoot – React