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에 빈 배열[]이 만들어짐.
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