投稿した質問数 5

2

안녕하세요!

이 두 방법의 차이점을 명확하게 설명해드리겠습니다.

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를 삭제 함수에 전달해야 하기 때문입니다!

추가 궁금한 점이 있으시면 언제든 질문해주세요! 🙂