todo-app의 할일 목록 부분(List.js)관련해서 질문이 있습니다.

Question

안녕하세요. 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 } > { handleCompleteChange( data .id); }} /> { data . title } )) } ) ; } 첫번째 질문. handleCompleteChange와 handleClick함수는 왜 콜백함수로 전달을 해야 정상적으로 작동하는지 궁금합니다. (초록색으로 표시한 부분) 두번째 질문. 어떤 경우에 콜백함수를 이용해서 함수를 전달해야하나요?? 답변 부탁드립니다. 감사합니다.

John Ahn · Answer

안녕하세요 kskname1님 좋은 질문 감사합니다. 결국 1번과 2번 질문이 같은 것 같습니다. 현재 onClick에서는 현재 data.id라는 인수가 필요합니다. 만약에 인수가 필요치 않다면 onSubmit 이벤트가 발생했을 때처럼 this.handleClick(클래스형 컴포넌트에서) handleClick(함수형 컴포넌트에서) 해주셔도 됩니다! 그래서 인수가 필요할 시와 아닐 시에 다르게 함수를 불러주시면 됩니다. 감사합니다.