onClick에 함수 혹은 화살표 함수 연결하기

코드를 작성하던 중 갑자기 onClick 처리의 늪에 빠져버렸다. 그래서 알아보는 시간

 

onClick에 화살표 함수를 사용해야하는 이유.

하단과 같은 형식으로 onClick 이후 화살표함수 없이 함수를 소환하게 된다면 button이 로드 되며, click 여부와 상관없이 해당 함수가 실행된다.

// 잘못된 방법
<button onClick={함수명()}>버튼</button>

따라서 onClick 사용의 올바른 방법은 다음과 같다

// 올바른 방법
<button onClick={() => {함수명()}}>버튼</button>
<button onClick={함수명}>버튼</button>

 

onClick으로 변수 넘겨주기

구글에서 보던 중 생각보다 이 부분에 대한 질문을 많이 발견하였다. 결론적으로 말하면 onClick으로 변수를 넘겨주려면 화살표 함수를 사용하여 함수 호출 시 넘겨주어야 정상 동작한다.

// 잘못된 방법
<button onClick={함수명('인자')}>버튼</button>
// 올바른 방법
<button onClick={() => {함수명('인자')}}>버튼</button>
// event 넘겨주기
<button onClick={(e) => {함수명(e)}}>버튼</button>

 

onClick의 this값

화살표 함수를 사용할 때에는 항상 this가 무엇을 향하고 있는지가 중요하다. 이때의 this는 전역객체를 향한다.

<button onClick={() => console.log(this)}>버튼</button> // window