[React] 이벤트에서 함수 호출하기

이벤트에 함수 전달하기

onClick과 같은 이벤트에는 아래와 같이 일반적으로 함수를 동작시키는 코드를 작성한다.

함수명 뒤에 ()를 붙이지 않아야한다.

function onClickHandle(){ ... }

<button onClick={onClickHandle}></button>

 

그렇다면 props를 전달하려면 어떻게 해야할까.

()를 삽입하여 props를 함수에게 전달하려면 arrow를 사용하거나 bind 함수를 사용해야한다.

function onClickHandle(btnNum){ ... }

//Arrow 사용
<button onClick={()=>{onClickHandle(1);}}></button>

//Bind 사용
<button onClick={onClickHandle.bind(1)}></button>

 

 

onClick과 같이 매개인자가 전달되지 않는 함수의 경우는 반드시 arrow나 bind를 사용해야한다.

onChange처럼 매개인자를 제공해주는 경우는 ()를 생략해도 된다.

 

이해하기

만약 arrow, bind를 사용하지 않고 함수에 ()를 붙여 이벤트에 전달해주는 경우,

컴포넌트가 랜더링을 하면서 함수가 호출된다. 이벤트가 호출될 때 동작하는게 아니라 랜더링되면서 함수를 호출하라고 읽어버린다.

()를 사용하지 않아야 함수 자체가 전달되며 props가 없을 때 함수를 전달하는 올바른 방법이다.

<button onClick={onClickHandle()}></button>

//쉽게 말해 위의 구문은 아래와 같다는 것이다.

onClickHandle();
<button></button>

props를 전달하는 경우에는 arrow, bind를 사용해야하는데, 이는 함수 자체를 전달하는 것이 아니라 새로운 함수를 생성하는 것이다.

즉, onClickHandle(1)이라는 함수를 onClick에서 새롭게 생성하는 것이다. 따라서 성능이 저하될 수 있다.

공식문서에도 render내에서 arrow를 사용하면 최적화가 깨질 수 있다고 하니 남발하는 것은 좋지 않겠다.

render밖에서 함수 자체를 arrow로 생성하도록하자.

 

또한, 클래스형에서는 this를 사용해 함수를 호출하는 경우가 많은데 bind를 하지 않을 경우 this가 undefined를 가리키게 되므로 bind 혹은 arrow를 사용하는 것이다.

 

아래 공식문서에 자세한 설명이 되어 있으니 깊은 이해를 원하면 참고하길 바란다.

컴포넌트에 함수 전달하기 – React