React 요소의 이벤트를 제어하는 것은 몇가지 문법적인 차이가 있지만, DOM 요소 이벤트를 제어하는 것과 매우 유사합니다.
- React 이벤트는 소문자가 아닌 camelCase를 사용하여 명명됩니다.
- JSX에 문자열 대신 함수를 전달합니다.
예를 들어 HTML에서 이벤트를 넣을 때는 아래와 같습니다.
<button onclick="activateLasers()">
Activate Lasers
</button>React에서 약간 다릅니다.
<button onClick={activateLasers}>
Activate Lasers
</button>다른 차이점으로는 React에서 기본 동작을 막기 위해 false 리턴을 사용할 수 없다는 것입니다. 반드시 명시적으로 preventDefault 를 호출해야 합니다. 예를 들어 HTML에서 새로운 페이지를 여는 기본 링크 동작을 막으려면 이렇게 작성할 수 있습니다.
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>React에서는 아래처럼 작성하면 됩니다.
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}여기서 e 는 합성 이벤트입니다. React는 W3C spec 에 따라 이런 합성 이벤트를 정의하므로 브라우저 간 호환성을 걱정할 필요는 없습니다. 더 자세한 사항은 SyntheticEvent 레퍼런스 가이드를 보시길 바랍니다.
일반적으로 DOM 요소가 생성된 후에 리스너를 추가하기 위해 addEventListener를 호출하지만 React는 그럴 필요가 없습니다. 대신 요소가 처음 렌더링될 때 리스너를 제공합니다.
ES6 class 를 이용해 요소를 정의할 때 이벤트 핸들러의 일반적인 패턴은 클래스의 메서드 형태입니다.
예를 들어, 아래 예제 Toggle 컴포넌트는 “ON” 과 “OFF” state를 유저가 토글할 수 있게 하는 버튼을 렌더링합니다.
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);JSX 콜백에서 this의 의미에 대해 주의해야합니다. 자바스크립트에서 클래스 메서드는 기본적으로 바인딩 되지 않습니다. 만약 this.handleClick 바인드를 잊은채로 onClick에 전달하면, 함수가 실제로 호출될 때 this는 undefined로 취급됩니다.
이건 React에서 정의한 동작이 아닙니다. 자바스크립트의 함수의 동작 방식의 일부입니다. 일반적으로 onClick={this.handleClick} 처럼 () 없이 메서드를 참조하면, 그 메서드를 bind 해야합니다.
만약 bind 를 호출하는 게 귀찮은 경우 이 문제를 해결할 수 있는 두가지 방법이 있습니다. 만약 실험 기능인 퍼블릭 클래스 필드 문법 을 사용한다면 클래스 필드를 정확히 콜백에 bind할 수 있습니다.
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}이 문법은 Create React App에서 기본으로 사용할 수 있습니다.
만약 클래스 필드 문법을 사용하고 싶지 않다면, 콜백에서 arrow function 을 사용할 수도 있습니다.
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}이 문법의 문제점은 LogginButton을 렌더링할 때마다 서로 다른 콜백이 만들어지는 것입니다. 대부분의 경우에서 크게 문제는 없습니다. 하지만 만약 콜백에서 하위 컴포넌트에 prop을 전달하는 경우, 이 컴포넌트는 큰 비용으로 다시 렌더링될 수 있습니다. 이런 종류의 성능 문제를 피하기 위해 보통 생섬자 함수에서 바인딩하거나 클래스 필드 문법을 사용하는 걸 권장합니다.
Passing Arguments to Event Handlers(이벤트 핸들러에 인수 전달하기)
반복 안에서 보통 이벤트 핸들러에 추가 파라미터를 전달하고 싶어할 것입니다. 예를 들어, 만약 id 가 원시적인 ID라면, 아래처럼 전달할 수 있습니다.
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>위 두 라인은 동일하며, arrow functions과 Function.prototype.bind 를 각각 사용하고 있습니다.
두 경우 모두, React 이벤트를 나타내는 e 인수는 ID 뒤에 두 번째 인수로 전달됩니다. arrow function을 사용하여 명시적으로 전달해야하지만, bind를 사용하면 추가 인수가 자동으로 전달됩니다.
