안녕하세요,
오늘은 React로 프로젝트를 진행하다
한 번쯤은 마주할 문제 상황에 대해 글을 써보려 합니다.

리액트로 개발을 하다 보면, 여러가지 유저 이벤트들을 처리해야 합니다.
여기선 가장 간단한 클릭 이벤트를 예시로 사용하겠습니다.

순수한 HTML과 달리, React에서는 이벤트 핸들러 함수를 onClick속성에 전달할 때,
즉시 실행을 의미하는 소괄호() 를 전달하면 안됐었죠.

<button onClick = {handleClick} />

이유를 다시금 떠올려보면 이벤트 핸들러 함수인 handleClick은
유저가 특정 요소를 "클릭" 했을 때만 실행되고, 그 외의 순간엔 실행하면 안되기 때문이죠.

그런데 때로는, 이벤트 핸들러 함수에 유저가 입력한 값을 인자로 전달해 이벤트 핸들러 함수에서 이 값을 갖고 로직을 구현하고 싶을 수 있는데요.

인자를 전달하려면 어쩔 수 없이 괄호를 사용해야 합니다.
여기서 많은 분들이 처음으로 어려움을 겪는 것 같습니다.
오늘은 이 문제를 해결해보겠습니다.

문제 상황 정의 및 잘못된 접근

유저로부터 클릭을 받는데, 유저가 터치한 화면 위치상의 x와 y좌표를 전달해, 그 값에 따라 특정 로직을 구현해본다고 가정할게요.

다음은 잘못된 접근입니다.

<button onClick={handleClick(posX, posY)} />

인자를 전달하기 위해 소괄호를 사용했더니..
이런! 즉시 실행을 하게 되어, 유저가 버튼을 클릭하지 않았을 시점에도 실행이 되겠네요.

지금이야 워낙 간단한 사례지만..
만일 누르면 추가 결제를 하도록 하는 버튼이었다면...
누르지 않아도 사이트에 들어오기만 하면 돈이 나가는 어마무시한 사이트가 되겠죠.

이 문제는 생각보다 간단하게 해결할 수 있습니다.
이벤트 핸들러를 함수 속에 다시 넣어주면 됩니다.
저는 익명함수를 사용하겠습니다.

바른 해결방법

괜히 글을 길게 썼는데, 해결 방법은 허무하리만큼 간단합니다.
자바스크립트의 기본 문법을 사용해서 다음과 같이 코드를 수정할 수 있습니다.

<button onClick={() => {handleClick(posX, posY)}} />

이렇게 하면, 인자를 전달하기 위한 소괄호를 사용하면서도
함수의 즉시 실행을 막을 수 있겠죠?

혹시 위의 코드가 이해가 가지 않으신다면, 자바스크립트 문법과 DOM Event에 관련된 공부를 하고 다시 돌아오시면 좋을 것 같습니다!

감사합니다.