[React] 리액트에서 onClick으로 함수를 호출하는 방법

클릭 이벤트로 함수 호출하는 건 쉽지 않아?

리액트에서 JSX를 통해 onClick 이벤트로 함수를 호출하는 방법은 매우 간단하고 쉽다. 그냥 주고 싶은 요소에

onClick={Func}를 써주면 된다. 물론, onClick={() => {...}} 처럼 콜백 함수를 사용할 수도 있다. 무척 간단한 방법이라 리액트에서 클릭 이벤트 함수 호출 방식에 대해 딱히 의문점을 가져본 적은 없었다. 

 

하지만, 누군가 나에게 물어봤다. "왜 onClick={Func}는 되는데, onClick={Func()}는 안 돼?" 이 질문에 나는 "음... 함수 자체를 호출하는 것과 함수의 껍데기를 벗겨서 호출하는 것의 차이아닐까...?"라는 추상적인 답변을 한 적이 있다.

물론, 느낌(?)은 얼추 맞다고 할 수는 있지만 명확한 답변은 아니라고 생각했다. 그리고, 나도 궁금해졌다. "왜 리액트에서 onClick으로 함수를 호출할 때 함수 이름만 쓰는 거지?" 원초적이지만 딱히 생각해 본 적 없는 주제였기에 이번 기회에 한 번 정리해보고 싶었다.

 

JSX 문법을 HTML로 헷갈리지 말자!

const Function = () => {
    return (
        <button onClick={Func}></button> // 버튼을 클릭하면 Func 함수가 실행
        <button onClick={Func()}></button> // onClick에 Func 함수의 반환값이 저장됨
    )
}

두 개의 버튼이 있다. 하나는 Func를 호출하고 하나는 Func()를 호출한다. 전자는 정상적으로 Func 함수가 실행되지만, 후자는 Func 함수가 실행되지 않는다. 두 개의 차이는 전자는 함수 자체를 이벤트 핸들러에 전달했다는 것이고, 후자는 함수를 호출한 뒤 반환값을 이벤트 핸들러에 전달했다는 점이다.

// Javascript
button.addEventListener('click', Func); // 함수 그 자체를 전달
button.addEventListener('click', Func()); // 함수 반환값을 전달

우리가 리액트(JSX)에서 HTML 문법을 사용한다고 해서 HTML이라고 생각하면 안 된다. 아까 리액트의 코드를 바닐라 자바스크립트로 표현해 보면 위와 같다고 볼 수 있다. 여기서도 똑같이 함수 이름만 써야 이벤트 핸들러에 함수 자체가 담긴다.

const Function = () => {
    return (
        <button onClick={() => Func()}></button> // 버튼을 클릭하면 콜백 함수가 실행
    )
}

addEventListener()에서 함수 이름 대신 콜백 함수를 사용할 수 있는 것처럼 JSX에서도 onClick에 콜백 함수를 불러올 수 있다. 콜백 함수를 사용하게 되면, 하나의 함수뿐만 아니라 여러 가지 동작을 수행하게 할 수도 있다.

const Function = () => {
    return (
        <button onClick={Func(a, b)}></button> // 정상 작동 X
        <button onClick={() => {Func(a, b)}}></button> // 매개변수가 있을 경우 콜백 함수 사용하기
    )
}

만약, 함수에 전달할 매개변수가 있을 경우에는 무조건 콜백 함수를 사용해야 한다. 콜백 함수 없이 그대로 이벤트 핸들러에 담아버리면 처음에 말했던 것과 똑같이 함수의 반환값이 클릭 이벤트에 담길 것이다.

 

리액트라고 해서 다를 것은 없다. 사실 해답은 모두 자바스크립트 안에 있었다. 리액트의 onClick은 자바스크립트의 addEventListener()와 같고, 함수 자체를 전달하거나 콜백 함수로 함수를 감싸서 전달해야 하는 것도 같다.

 

1. onClick={Func}는 Func 함수 실행 / onClick={Func()}는 onClick에 Func 함수의 반환값 저장
2. onClick={() => Func()} // 콜백 함수를 사용하면 이렇게 사용할 수도 있음
3. onClick={() => Func(a, b)} // 매개변수가 있는 함수의 경우 콜백 함수 이용
4. 바닐라 자바스크립트에서 addEventListener('click', Func)라고 사용하는 이유와 똑같음