[React] 리액트 - 이벤트 처리하기

안녕하세요. 이번 포스팅에서는 리액트(React)에서 이벤트를 처리하는 방식에 대해서 알아보겠습니다.

 

사용자가 브라우저에서 특정 DOM 요소와 상호작용하는 것을 이벤트라고 부릅니다. 예를 들어 버튼을 Click 하는 onClick 이벤트라든지 입력 요소의 값이 변경되는 onChange 이벤트와 같이 사용자의 특정 행동에 대해 핸들러를 통해 특정 이벤트에 대해 처리를 할 수 있습니다. 리액트(React)에서는 이벤트 처리와 관련해서 몇 가지 주의사항이 있습니다.

 

■ 이벤트 이름은 CamelCase 형식으로 작성합니다.

■ 이벤트 핸들러는 자바 스크립트 코드가 아닌 함수 구현체에 해당하는 값을 전달합니다.

■ DOM 요소에만 이벤트를 지정할 수 있습니다.

 

<button onClick = {() => {console.log("Click")}}>
    Click
</button>

 

▼ button 요소에 OnClick 이벤트를 등록하는 방법입니다. 첫 번째로 이벤트 이름은 CamelCase 형식으로 onClick 같이 대문자를 사용합니다. 두 번째 핸들러를 등록하는 방식은 자바 스크립트가 아닌 함수 구현체가 들어갑니다. 위 형태는 렌더링 시점에 함수를 만들어 전달하는 방식이지만 아래 코드와 같이 함수를 미리 만들어놓고 전달하는 방법도 있습니다.

 

handleClick = () => {
    console.log("Click");
}

<button onClick = {this.handleClick}>
    Click
</button>

 

▼ this 키워드를 통해 미리 구현해놓은 함수의 이름을 전달하고 있습니다. 위 코드와 기능적인 차이는 없지만, 가독성을 위해서 웬만해선 두 번째 방식으로 코드를 작성하는 것이 유리합니다.

---

실제로 이벤트를 등록하는 간단한 샘플예제를 살펴보겠습니다.

 

import React, { Component } from 'react';
import './MyComponent.css';

class MyComponent extends Component
{    
    constructor(props)
    {
        super(props);
        this.state = {
            message : 'Hello' 
        }
    }   

    handleOnChange = (e) => {
        this.setState({
            message : e.target.value
        });
    }

    render(){
        return(
            <div>
                <input 
                    type = "text" 
                    name = "message" 
                    onChange = {this.handleOnChange} 
                />
                <h1>
                    {this.state.message}
                </h1>
            </div>
        )
    }
}

export default MyComponent;

 

▼ 먼저 해당 MyComponent에서는 message라는 state를 사용합니다. 초기값으로 "Hello"를 설정합니다. 해당 state 값은 DOM 요소 중 <h1> 요소의 값으로 출력됩니다. 추가로 <input> 태그를 추가하고 onChange 이벤트를 등록하는데 핸들러로 handleOnChange를 넘겨주고 있습니다. handleOnChange 함수는 setState() 함수를 통해 message의 값을 업데이트 해줍니다. setState()에 의해서 state 값이 업데이트 되었으므로 새로운 값을 이용하여 리렌더링을 실행하게 되고 화면에는 input 요소에 입력된 값이 그대로 출력이 됩니다.

 

▼ 앱을 최초 실행하면 message 초기값 "Hello"가 그대로 출력이 됩니다. TextBox에 Text를 입력해보겠습니다.

 

▼ TextBox에 입력된 Text에 따라 아래 출력문이 변경되는 것을 확인할 수 있습니다.

---

연습 차원으로 한 가지 샘플예제를 더 살펴보겠습니다. 이번에는 Buttonn onClick 이벤트를 등록하는 방법입니다.

 

import React, { Component } from 'react';
import './MyComponent.css';

class MyComponent extends Component
{    
    handleOnClick = () => {
        console.log("Click")
    }

    render(){
        return(
            <div>
                <button onClick = {this.handleOnClick}>
                    출력
                </button>
            </div>
        )
    }
}

export default MyComponent;

 

▼ 첫 번째 예제보다 더 간단한 형태입니다. Button이 하나 있고 onClick 이벤트를 등록합니다. 전달하는 함수는 handleOnClick으로 내부 구현은 Console에 "Click"을 출력해줍니다.