인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

with's profile image
with

asked

Learn React A-Z by following along [19 version included]

Marking a task as completed (conditional ternary operator)

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

Written on

·

270

0

input checkbox 에서

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

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

 

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

reactreduxtddtypescriptnext.js소프트웨어-테스트

Answer 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 함수에 전달하고자 할 때 사용하는 것입니다.

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

with's profile image
with

asked

Ask a question