React - To do list

App.jsx

import React, {useState} from 'react';
import './App.css';
import Todoboard from './components/Todoboard';

function App() {
  const [inputValue, setInputValue] = useState('');
  const [todoList, setTodoList] = useState([]);

  const addItem = () => {
    setTodoList([...todoList,inputValue])
  }
  return (
    <>
      <input className = "input-style" onChange={(e) => setInputValue(e.target.value)} value = {inputValue}></input>
      <button className='btn-style' onClick={addItem}>추가</button>
      <Todoboard todoList = {todoList}></Todoboard>
      
    </>
  );
}

export default App;

const [todoList, setTodoList] = useState([]); //todoList에 빈 배열[]이 만들어짐.

setTodoList([...todoList,inputValue]) // 기존의 아이템을 유지하며, 새로운 아이템(inputValue)추가.

Todoboard.jsx

import React from 'react'
import Todoitem from './Todoitem';

const Todoboard = (props) => {
    console.log('전달',props.todoList);
    
  return (
    <>
    <h1 className = "h1">Todo List</h1>
    {props.todoList.map((item) => <Todoitem item = {item}/>)}
    </>

  )
}

export default Todoboard

Todoitem

import React from 'react'

const Todoitem = (props) => {
  return (
    <div className='item'>
        {props.item}
    </div>
  )
}

export default Todoitem