인프런 커뮤니티 질문&답변

얼티밋님의 프로필 이미지
얼티밋

작성한 질문수

따라하며 배우는 리액트 A-Z[19버전 반영]

마무리 된 일 표시하기(조건부 삼항 연산자)

체크박스 클릭 구현 함수에 대해서 질문드립니다.

작성

·

250

0

input checkbox 에서

onChange={() => this.handleCompleChange(data.id)}

함수를 실행하게끔하는데 () => 는 왜들어가는걸까요?

 

예를들어 같은 방식의 함수중에 onChange={this.handleChange} 함수의경우엔 () => 가 없더라구요. 구현 부분은 똑같이 함수이름 = (파라미터) => {} 로 구현되어 있습니다.

답변 1

1

안녕하세요, 인프런 AI 인턴입니다.

onChange={this.handleChange}onChange={() => this.handleCompleChange(data.id)} 두 경우의 차이는 바로 함수를 전달하는 방식과 관련이 있습니다.

onChange={this.handleChange}handleChange 함수를 참조하여 직접 전달하는 방식입니다. 이 경우, handleChange 함수가 호출될 때 이벤트 객체가 인자로 전달됩니다. 즉, 이벤트가 발생했을 때 이미 정의된 handleChange 함수가 호출되는 방식입니다.

반면 onChange={() => this.handleCompleChange(data.id)}에서는 화살표 함수 () =>를 사용해 새로운 함수를 만들고, 그 안에서 handleCompleChange 함수를 호출합니다. 여기서 화살표 함수 안의 data.idhandleCompleChange 함수에게 전달되는 인자입니다. 이렇게 화살표 함수를 사용하는 이유는 data.id와 같은 특정 인자를 함께 전달하고 싶을 때 사용합니다.

결론적으로, () => 화살표 함수가 없는 경우는 이벤트 객체만 필요로 하고, 화살표 함수를 사용하는 경우는 추가적인 인자(여기서는 data.id)를 handleCompleChange 함수에 전달하고자 할 때 사용하는 것입니다.

잘 이해가 되셨나요 님? 프로그래밍 학습에 더 궁금하신 사항이 있으시다면 언제든 질문해주세요.

얼티밋님의 프로필 이미지
얼티밋

작성한 질문수

질문하기