인프런 커뮤니티 질문&답변
작성한 질문수
todo-app의 할일 목록 부분(List.js)관련해서 질문이 있습니다.
작성
·
158
0
안녕하세요. 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함수는 왜 콜백함수로 전달을 해야 정상적으로 작동하는지 궁금합니다.
(초록색으로 표시한 부분)
두번째 질문.
어떤 경우에 콜백함수를 이용해서 함수를 전달해야하나요??
답변 부탁드립니다.
감사합니다.
답변 1
1
John Ahn
지식공유자
안녕하세요 kskname1님
좋은 질문 감사합니다.
결국 1번과 2번 질문이 같은 것 같습니다.
현재 onClick에서는 현재 data.id라는 인수가 필요합니다.
만약에 인수가 필요치 않다면 onSubmit 이벤트가 발생했을 때처럼 this.handleClick(클래스형 컴포넌트에서) handleClick(함수형 컴포넌트에서) 해주셔도 됩니다!
그래서 인수가 필요할 시와 아닐 시에 다르게 함수를 불러주시면 됩니다.
감사합니다.
답변해 주셔서 감사드립니다.