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

Question

input checkbox 에서 onChange ={() => this.handleCompleChange ( data .i d)} 함수를 실행하게끔하는데 () => 는 왜들어가는걸까요?   예를들어 같은 방식의 함수중에 onChange={this.handleChange} 함수의경우엔 () => 가 없더라구요. 구현 부분은 똑같이 함수이름 = (파라미터) => {} 로 구현되어 있습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. onChange={this.handleChange} 와 onChange={() => this.handleCompleChange(data.id)} 두 경우의 차이는 바로 함수를 전달하는 방식과 관련이 있습니다. onChange={this.handleChange} 는 handleChange 함수를 참조하여 직접 전달하는 방식입니다. 이 경우, handleChange 함수가 호출될 때 이벤트 객체가 인자로 전달됩니다. 즉, 이벤트가 발생했을 때 이미 정의된 handleChange 함수가 호출되는 방식입니다. 반면 onChange={() => this.handleCompleChange(data.id)} 에서는 화살표 함수 () => 를 사용해 새로운 함수를 만들고, 그 안에서 handleCompleChange 함수를 호출합니다. 여기서 화살표 함수 안의 data.id 는 handleCompleChange 함수에게 전달되는 인자입니다. 이렇게 화살표 함수를 사용하는 이유는 data.id 와 같은 특정 인자를 함께 전달하고 싶을 때 사용합니다. 결론적으로, () => 화살표 함수가 없는 경우는 이벤트 객체만 필요로 하고, 화살표 함수를 사용하는 경우는 추가적인 인자(여기서는 data.id )를 handleCompleChange 함수에 전달하고자 할 때 사용하는 것입니다. 잘 이해가 되셨나요 님? 프로그래밍 학습에 더 궁금하신 사항이 있으시다면 언제든 질문해주세요.