JSX에서 onClick 이벤트가 발생했을 시에 매개변수를 넣어주고 싶을 떄가 있을 것이다. 그럴 때 이렇게 한다면 의도하지 않은 결과가 나올 것이다.
const handleClick = name => {
console.log("hello " + name);
};
...
<button
onClick={handleClickAgain("donglee")}
>
//매개변수를 넘기고 싶은 경우 이렇게 구현한다.
Click me again
</button>
...JSX 에서 onClick 이벤트에 매개변수를 넘기고 싶다고 해서 일반적으로 하는 경우처럼 괄호를 열어서 그 안에 매개변수를 넣게 되면 에러는 나지 않지만 컴퓨터가 이 파일을 로드하면서 함수명 뒤에 괄호는 그 함수를 즉각 실행시키기 때문에 브라우저에서 console 창을 확인해보면 버튼을 클릭하지 않았는데도 불구하고 donglee 라고 출력되는 결과가 나온다.
그렇다면 어떻게 해야 매개변수를 전달할 수 있을까? 그 방법 중 하나는 실행시키고자 하는 함수를 익명함수로 감싸는 방법이다. 아래 코드 스니펫과 같이 onClick 이후에 익명함수로 감싸고 그 익명함수의 구현부분에서 실행시키고자 하는 함수를 호출하면서 그 안에서 매개변수를 넘겨주는 것이다. 이렇게 한다면 name에 'donglee'가 담겨서 버튼을 클릭했을 시에만 브라우저 console창에 hello donlee 라고 의도한 결과가 출력된다.
const Home = () => {
const handleClick = name => {
console.log("hello " + name);
};
return (
<div className="home">
// <button onClick={handleClick}>Click me</button>
// 보통은 이런 방식으로 매개변수 없이 함수를 전달한다.
<button
onClick={() => {
handleClick("donglee");
}}
>
//매개변수를 넘기고 싶은 경우 이렇게 구현한다.
Click me again
</button>
</div>
);
};
export default Home;위 코드 스니펫에서 화살표함수는 한 줄일 떄는
{}를 생략할 수 있으니<button onClick={ () => handleClick("donglee") }> Click me again</button>이런 식으로 한 줄로 표현할 수 있다.
이벤트객체
onClick 으로 JSX에 이벤트핸들러 함수를 작성하게 되면 자동으로 이벤트 객체가 첫 번째 매개변수로 전달이 된다.
//이벤트객체를 제외한 다른 매개변수가 없는 함수의 경우
const handleClick = (e) => {
console.log(e); //이벤트 객체가 브라우저에 출력됨
}
<button onClick={handleClick}></button>위와 같이 handleClick 함수로 어떤 매개변수로 넘겨줄 필요가 없을 때는 그냥 함수 정의부에서 첫 번째 매개변수로 event객체가 자동으로 들어오게 된다. 그래서 정의부에서처럼 e로 받아왔으면 그것이 이벤트 객체가 돼서 활용할 수가 있다.
그런데 위에 매개변수를 넘겨주려는 의도인 경우에는 조금 다르게 이벤트 객체를 넘겨주어야 한다.
//이벤트객체를 제외한 다른 매개변수가 있는 함수의 경우
const handleClick = (name, e) => {
console.log('my name is ' + name, e);
//my name is donglee 가 출력되고 이벤트 객체도 출력된다.
}
<button onClick={(e)=>handleClick('donglee', e)}></button>이벤트객체 외에 다른 매개변수를 넘겨주려고 할 경우에는 익명함수를 써야 하는데 이 때는 이벤트객체가 handleClick함수로 가는 것이 아니라 handleClick함수를 감싸고 있는 익명함수에 자동으로 이벤트 객체가 넘어가기 때문에 위와 같이 익명함수에서 이벤트객체를 인자로 받아주고 그 인자를 handleClick 함수에 매개변수로 넘겨줘야 한다.
