이제는 input과 button을 묶어 <InputArea /> 컴포넌트로 따로 빼보자.
현재 App.js 코드는 다음과 같다.
Input과 관련된 내용을 InputArea로 옮긴다.
import React, { useState } from "react";
import ToDoItem from "./ToDoItem";
function App() {
const [inputText, setInputText] = useState("");
const [items, setItems] = useState([]);
function handleChange(event) {
var newValue = event.target.value;
setInputText(newValue);
}
function addItem() {
setItems((prevItems) => {
return [...prevItems, inputText];
});
setInputText("");
}
function deleteItem(id) {
setItems((prevItems) => {
return prevItems.filter((item, index)=>{
return index !== id;
})
});
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input onChange={handleChange} type="text" value={inputText} />
<button onClick={addItem}>
<span>Add</span>
</button>
</div>
<div>
<ul>
{items.map((todoItem, index) => (
<ToDoItem
key={index}
id={index}
todoItem={todoItem}
onChecked={deleteItem}
/>
))}
</ul>
</div>
</div>
);
}
export default App;
InputArea
App.js에 있는 함수를 연결 할 땐 props.함수이름으로 받으면 됨.
App.js에서 inputText와 setInputText가 없어져서 에러가 남
addItem() 함수를 InputArea에서 트리거 하고서
addItem() 함수에 inputText를 받아와 사용할 수 있다.
addItem 함수를 InputArea로 보내어 props로 렌더하기
InputArea에서 props으로 받아 버튼이 클릭 됐을 때 함수를 실행 시킨다.
App.js에 있는 addItem 함수에
InputArea 있는 InputText를 받아야하는 데 어떻게 해야할까?
InputArea에 있는 addItem에 파라미터로 현재의 inputText를 넣어주어
클릭 했을 때 익명 함수로 받게 하고, addItem이 실행되도록 한다.
현재의 inputText을 받아
App.js에 있는 addItem 함수의 파라미터로 넣는다.
Input 비워주는 setInputText도 여기 있을 필요가 없기 때문에
InputArea로 옮겨준다.
최종 코드
App.js
import React, { useState } from "react";
import ToDoItem from "./ToDoItem";
import InputArea from "./InputArea";
function App() {
const [items, setItems] = useState([]);
function addItem(inputText) {
setItems((prevItems) => {
return [...prevItems, inputText];
});
}
function deleteItem(id) {
setItems((prevItems) => {
return prevItems.filter((item, index) => {
return index !== id;
});
});
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<InputArea addItem={addItem} />
<div>
<ul>
{items.map((todoItem, index) => (
<ToDoItem
key={index}
id={index}
todoItem={todoItem}
onChecked={deleteItem}
/>
))}
</ul>
</div>
</div>
);
}
export default App;
InputArea.js
ToDoItem.js
HTML
CSS
'React > Keeper-app | To-Do-app clone' 카테고리의 다른 글
| [Keeper-App 4] notes array 만들어 노트 map()으로 돌리기 (0) | 2022.04.17 |
|---|---|
| [Keeper-App 3] CreateArea 컴포넌트 만들기 (0) | 2022.04.17 |
| [To-Do App] 아이템 지우기 | (0) | 2022.04.16 |
| [To-Do App] 취소선 긋기 | Component Tree | stateless component (0) | 2022.04.06 |
| [To-Do App] 시작 (0) | 2022.04.05 |
댓글