리액트의 이벤트 리스너는 함수의 이름을 넣어서 등록한다.
function()의 형식이 아니라 function 처럼 함수의 이름만 적는 등록이다.
그 이유는 코드가 렌더링되는 과정에서 이벤트가 발생하지 않았음에도 불구하고 fuction()은 곧 바로 평가되고 값으로 반환되기 때문이다.
보통 인자를 넘겨줄 때에는 function(1)과 같이 함수의 이름에 괄호를 붙혀 넘겨준다.
하지만 이렇게되면 함수는 바로 평가되어 버린다. 이것은 보통 우리가 원치않는 실행이다.
렌더링 될 때 평가되지 않게 함수에 인자를 넘겨주며 이벤트를 등록할 때에는 익명의 화살표 함수를 사용한다.
ex) onClick={()=>{ myFunction(parameter) }}
익명함수는 이름이 없다. 고로 이런식의 호출을 한다. 화살표함수는 이런식이다.
((a,b)=>{return a+b;})(1,2)
위의 코드는 값으로 여겨지는 함수 호출임을 알아야한다.
이벤트에 의해 실행되는 등록은 괄호가 없다.
()=>{}();
이 아니라
()=>{}
라는 것이다.
onClick={()=>{ myFunction(parameter) }}
어떻게 해서든 최종적으로 이벤트에 함수의 값이 아닌 레퍼런스를 등록하면 되는 것이다.
잘 이해되게 작성했는지 모르겠다.