[TIL] 23/11/07 React 입문: 이벤트 핸들러( feat. 매개변수)

한 일

스탠다드반 수업에서 한시간동안 개인과제 다시 구현하기 했는데

복붙을 잃으니까 뭔가 잘 안된다 ㅋㅋㅋ

하루종일 복습하고 튜터님 찾아가고

리액트 숙련 강의는 하나밖에 못봤다.

 

TIL

React 이벤트 핸들러 매개변수 주기

오늘 튜터님이랑 씨름하고 온 것 ~!

 

<button onClick = {이안에 들어가는 것은 이벤트 핸들러}>

이벤트핸들러는 event를 매개변수로 가질수 있고 안써도 된다. 개발자의 선택.

 

다른 매개변수를 주고싶을 경우

<button onClick = clickRemoveButtonHandler(item.id)>  //  틀린코드

이렇게 써주면 안되는 이유는 저렇게 써주는 순간 함수 호출문이 되어서 함수 호출을 해버리는 것

onClick에는 함수의 주소가 아니라, 함수의 return 값이 들어가 버린다.

return 을 명시적으로 안하고 있다면 undefined 가 들어가게 된다.

완전히 이상한 코드.

 

올바른 코드로 고쳐보면

<button onClick = {()  = > clickRemoveButtonHandler(item.id)}>  // 바른코드

이 코드는 해석해보면 () => 사실은 이놈이 이벤트 핸들러가 된다.

clickRemoveButtonHandler(item.id) 를 리턴하는 무명의 화살표 함수를 onClick에 넣어주는 것이다.

 

화살표 함수를 풀어 써보면

onClick = {function () { return clickRemoveButtonHandler(item.id);  }}

 

이 함수가 event 객체도 전달하고 싶다면

onClick = {function (e) { return clickRemoveButtonHandler(e, item.id);  }}

 

다시 화살표로 

onClick = {(e) =>{ clickRemoveButtonHandler(e, item.id) }

여기서 앞에 (e) 에 e를 빼먹으면 오류난다. e 는 이벤트 핸들러의 매개변수로서 새로 등장한 것이니까.

안써주면 뒤에서는 모른다!

 

매개 변수 없이 함수 이름만 전달할 경우

<input value ={name} onChange = {nameChangeHandler} />

 

그런데 이놈도 사실은 매개변수로 이벤트 객체를 받을 수 있으며 받고 있다.

nameChangeHandler 함수 정의로 가보면 event를 사용하고있음.

const nameChangeHandler = (event) => {

    setName(event.target.value);

};

 

명시적으로 써보면

<input value ={name} onChange = {(e) => nameChangeHandler(e) } />

이렇게 써줘도 되지만 안써줘도 된다!

 

끝 (자주 쓸 것 같은 형식에만 굵게표시 해두었다)

 

할 일 / 부족한 점

연습만이 살길이다

타자를 자꾸 치자

숙련강의는 많이 치면서 들어야징