이벤트와 매개변수

리액트에서 onClick 이나 onChange라는 이벤트를 넣어주고 그안에 함수를 넣을 때
어떤 때는 그냥 함수 이름만와도 됐었는데 어떤 때는 () => 를 넣어주고 함수를 뒤에 넣어준다.
둘다 실행했을 때 별 차이가 없어보이는데 어떤 차이가 있는지 알아보았다.

매개변수 전달

()=> 가 없을 때, 함수 이름만 있을 때는 , 이벤트 객체가 첫 번째 매개 변수로 전달이 된다. 이벤트 객체가 자동으로 들어온다.

const handleClick = (e) => {
	console.log(e);	//이벤트 객체가 브라우저에 출력됨
}

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

그렇다면 () => 언제 쓰나면 매개변수가 하나가 아니라 여러개일 때 사용한다.
하지만 이런방식으로 하면 렌더링 될 때마다 함수의 참조를 새로 만들게되어 성능에 영향을 미칠수 있다.

const handleClick = (name, e) => {
	console.log('my name is ' + name, e);
  //my name is donglee 가 출력되고 이벤트 객체도 출력된다. 
}
<button onClick={(e)=>handleClick('jessy', e)}></button>
...