[React] 투두리스트: 리스트 & 추가기능

//TodoList.jsx

import React, { useState } from 'react'
import AddTodo from '../AddTodo/AddTodo'

export default function TodoList () {
  const [todos, setTodos] = useState([
    { id: '123', text: '장보기', status: 'active' },
    { id: '124', text: '공부하기', status: 'active' }])

  const handleAdd = (todo) => {
    setTodos([...todos, todo])
  }

  return (
    <>
      <section>
        <ul>
          {
            todos.map(item => <li key={ item.id }>{ item.text }</li>)
          }
        </ul>
      </section>
      <AddTodo onAdd={ handleAdd } />
    </>
  )
}

//AddTodo.jsx

import React, { useState } from 'react'

export default function AddTodo ({ onAdd }) {
  const [text, setText] = useState('')
  const handleChange = (e) => {
    setText(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()    //페이지 리프레쉬 되지 않도록
    if(text.trim() === '') {   
      return
    } else {
      onAdd({ id: '고유한값', text, status: 'active' })
      setText('')
    }
  }
  //trim은 text의 앞 뒤 여백을 모두 없애주는 메서드 

  return (
    <div>
      <form onSubmit={ handleSubmit }>
        <input type='text' placeholder='Add Todo' value={ text } onChange={ handleChange } />
        <button>Add</button>
      </form>
    </div >
  )
}