사용자 이벤트 작업

3분

이벤트를 사용하면 애플리케이션에서 사용자 동작에 대한 응답으로 코드를 실행할 수 있습니다. JSX는 JavaScript, XML, HTML을 기반으로 하기 때문에 이벤트 수신기를 추가하는 작업은 비교적 익숙한 것입니다.

HTML에 특성을 추가하여 처리할 이벤트의 이름을 표시합니다. 예를 들어 alert를 사용하여 단추가 선택될 때 메시지를 표시하려는 경우 다음 코드를 사용할 수 있습니다.

class Demo extends React.Component {
    render() {
        <button onClick={ () => alert('Hello, world!') }>Click me!</button>
    }
}

이벤트를 수신 대기할 함수도 만들 수 있습니다. 구성 요소에 함수를 추가합니다. 그런 다음, alert에 사용한 것과 동일한 구문을 사용하여 함수를 호출합니다.

class Demo extends React.Component {
    displayMessage() {
        alert('Hello, world!');
    }

    render() {
        <button onClick={ () => displayMessage() }>Click me!</button>
    }
}

필요에 따라 매개 변수를 이벤트 처리기에 전달할 수도 있습니다.

class Demo extends React.Component {
    displayMessage(message) {
        alert(message);
    }

    render() {
        <button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
    }
}

사용자 이벤트 작업

피드백