안녕하세요. todo-app의 할일 목록 부분 코드 관련 질문이 있어서 올립니다.
import React from "react";
export default function List({ todoData, setToDoData }) {
const btnStyle = {
color: "#fff",
border: "none",
padding: "5px 9px",
borderRadius: "50%",
cursor: "pointer",
float: "right",
};
const handleCompleteChange = (id) => {
let newToDoData = todoData.map((data) => {
if (data.id === id) {
data.completed = !data.completed;
}
return data;
});
setToDoData(newToDoData);
};
const getStyle = (completed) => {
return {
padding: "10px",
borderBottom: "1px #ccc dotted",
textDecoration: completed ? "line-through" : "none",
};
};
const handleClick = (id) => {
let newToDoData = todoData.filter((data) => data.id !== id);
console.log("newToDoData", newToDoData);
setToDoData(newToDoData);
};
return (
<div>
{todoData.map((data) => (
<div style={getStyle(data.completed)} key={data.id}>
<input
type="checkbox"
defaultChecked={false}
onChange={() => {
handleCompleteChange(data.id);
}}
/>
{data.title}
<button
style={btnStyle}
onClick={() => handleClick(data.id)}
>
x
</button>
</div>
))}
</div>
);
}
첫번째 질문.
handleCompleteChange와 handleClick함수는 왜 콜백함수로 전달을 해야 정상적으로 작동하는지 궁금합니다.
(초록색으로 표시한 부분)
두번째 질문.
어떤 경우에 콜백함수를 이용해서 함수를 전달해야하나요??
답변 부탁드립니다.
감사합니다.
답변해 주셔서 감사드립니다.