리액트 이벤트 함수 등록

정찬·2020년 4월 13일
0

리액트의 이벤트 리스너는 함수의 이름을 넣어서 등록한다.
function()의 형식이 아니라 function 처럼 함수의 이름만 적는 등록이다.

그 이유는 코드가 렌더링되는 과정에서 이벤트가 발생하지 않았음에도 불구하고 fuction()은 곧 바로 평가되고 값으로 반환되기 때문이다.

그렇다면 이벤트 등록시 함수에 인자를 넘겨줄 때에는 어떻게 해야하나?

보통 인자를 넘겨줄 때에는 function(1)과 같이 함수의 이름에 괄호를 붙혀 넘겨준다.
하지만 이렇게되면 함수는 바로 평가되어 버린다. 이것은 보통 우리가 원치않는 실행이다.

렌더링 될 때 평가되지 않게 함수에 인자를 넘겨주며 이벤트를 등록할 때에는 익명의 화살표 함수를 사용한다.

ex)  onClick={()=>{ myFunction(parameter) }}

익명함수는 이름이 없다. 고로 이런식의 호출을 한다. 화살표함수는 이런식이다.

((a,b)=>{return a+b;})(1,2)

위의 코드는 값으로 여겨지는 함수 호출임을 알아야한다.

이벤트에 의해 실행되는 등록은 괄호가 없다.

()=>{}();

이 아니라

()=>{}

라는 것이다.

onClick={()=>{ myFunction(parameter) }}

어떻게 해서든 최종적으로 이벤트에 함수의 값이 아닌 레퍼런스를 등록하면 되는 것이다.

잘 이해되게 작성했는지 모르겠다.

profile
맞왜틀500

0개의 댓글