이벤트 매개변수 전달

이벤트가 발생했을때 실행할 함수에 매개변수를 같이 넘겨주기

handleClick = name => {
	console.log("hello " + name);
};
...
      <button
        onClick={handleClick("mango")}

        Click me again
      </button>
...

onClick 이벤트에 매개변수를 넘기고 싶을때 일반적으로 하는 경우처럼 괄호를 열어서 그 안에 매개변수를 넣게 되면 에러는 나지 않지만 컴퓨터가 이 파일을 로드하면서 함수명 뒤에 괄호는 그 함수를 즉각 실행시키기 때문에 브라우저에서 console 창을 확인해보면 버튼을 클릭하지 않았는데도 불구하고 mango 라고 출력되는 결과를 볼 수 있다.

onClick 이벤트가 발생했을 때 매개변수를 넘겨줄수 있는
방법 중 하나는 실행시키고자 하는 함수를 익명함수로 감싸는 방법이다. 아래 코드와 같이 onClick 이후에 익명함수로 감싸고 그 익명함수의 구현부분에서 실행시키고자 하는 함수를 호출하면서 그 안에서 매개변수를 넘겨주는 것이다.
name에 'mango'가 인자로 담겨 버튼을 클릭했을 시에만 브라우저 console창에 hello mango 라는 의도한 결과가 출력된다.

handleClick = name => {
    console.log("hello " + name);
  };
  return (
    <div>
   //   <button onClick={handleClick}>Click me</button>
   //  ☝🏻 매개변수 없이 함수를 전달할 때
      <button
        onClick={() => {
          handleClick("mango");
        }}
//매개변수를 넘기고 싶은 경우 
        Click me again
      </button>
    </div>
  );
};

☝🏻 한줄로 줄여서 쓸 수도 있다
<button onClick={ () => handleClick("donglee") }> Click me again</button>

handleClick 함수로 어떤 매개변수로 넘겨줄 필요가 없을 때는 그냥 함수 정의에서 첫 번째 매개변수로 event객체가 자동으로 들어오게 된다. 그래서 정의에서처럼 e로 받아왔으면 그것이 이벤트 객체가 돼어 사용할 수 있다.

//이벤트객체를 제외한 다른 매개변수가 없는 함수의 경우
    handleClick = (e) => {
	console.log(e);	//이벤트 객체가 브라우저에 출력됨
    }
<button onClick={handleClick}></button>

이벤트객체 외에 다른 매개변수도 함께 넘겨주려고 할 경우에는 익명함수를 써야 하는데 이 때는 이벤트객체가 handleClick함수로 가는 것이 아니라 handleClick함수를 감싸고 있는 익명함수에 자동으로 이벤트 객체가 넘어가기 때문에 위와 같이 익명함수에서 이벤트객체를 인자로 받아주고 그 인자를 handleClick 함수에 매개변수로 넘겨줘야 한다.

//이벤트객체를 제외한 다른 매개변수가 있는 함수의 경우
handleClick = (name, e) => {
	console.log('my name is ' + name, e);
  //my name is mango가 출력되고 이벤트 객체도 출력된다.
}
<button onClick={(e)=>handleClick('mango', e)}></button>