인프런 커뮤니티 질문&답변
작성한 질문수
onClick 이벤트에 함수 넘길 때
작성
·
13
0
안녕하세요 강사님. 강의 잘 듣고 있습니다.
배열 업데이트하기 1탄 강의 보고 있는데 궁금한 점이 있습니다.
강의 11:28에서 button onClick 이벤트에 onDeleteTodo 함수를 넘기는데요.
강의에서는
onClick={() => onDeleteTodo(item.id)}
이런 형식으로 넘기고 있는데
다른 부분에는 onClick={onDeleteTodo} 이런식으로 사용하기도 하셔서요.
(강의에서 이렇게 사용했다는게 아닙니다. 예시입니다.)
onClick={() => onDeleteTodo(item.id)}
onClick={onDeleteTodo}
이 두가지를 언제 어떻게 구분해서 사용해야 하는지 궁금합니다.
답변 2
1
짐코딩
지식공유자
안녕하세요!
이 두 방법의 차이점을 명확하게 설명해드리겠습니다.
1. onClick={() => onDeleteTodo(item.id)}
화살표 함수로 감싸서 전달하는 경우:
// 매개변수가 필요한 경우
<button onClick={() => onDeleteTodo(item.id)}>
삭제
</button>
언제 사용하나요?
함수에 특정 매개변수를 전달해야 할 때 (예:
item.id)
2. onClick={onDeleteTodo}
함수를 직접 전달하는 경우:
// 매개변수가 불필요하거나 event 객체만 필요한 경우
<button onClick={onDeleteTodo}>
삭제
</button>
언제 사용하나요?
매개변수가 필요 없을 때
이벤트 객체(
event)만 사용하면 될 때성능을 최적화하고 싶을 때
성능 고려사항
// ❌ 매번 새로운 함수 생성 (렌더링할 때마다)
<button onClick={() => onDeleteTodo(item.id)}>삭제</button>
// ✅ 동일한 함수 참조 유지
<button onClick={onDeleteTodo} data-id={item.id}>삭제</button>
결론 및 권장사항
매개변수가 필요하다면:
onClick={() => func(param)}사용매개변수가 불필요하다면:
onClick={func}사용
강의에서 onClick={() => onDeleteTodo(item.id)}를 사용한 이유는 각각의 todo 항목의 고유한 id를 삭제 함수에 전달해야 하기 때문입니다!
추가 궁금한 점이 있으시면 언제든 질문해주세요! 🙂
0
