React 주요 개념 Event 처리

react 엘리먼트에서 이벤트를 처리하는 방법은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하지만 몇 가지 차이점이 있습니다.

 

convention

• react의 이벤트는 소문자 대신 캐멀 케이스를 사용합니다.
• JSX를 사용하기 때문에 함수로 이벤트 핸들러를 전달합니다.

<button onClick={clickEvent}>click</button>

preventDefault

react에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault 를 명시적으로 호출해야 합니다.

// HTML Style
<button onClick="alert('click'); return false;">click</button>

// React JSX Style
function ClickButton () {
    function handler(e) {
    	e.preventdefault();
        alert('click');
    }
    
    return (
    	<button onClick={clickButton}>click</button>
    };
}

ES6 클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것입니다.

 

예를 들어, 다음 Toggle 컴포넌트는 사용자가 “ON”과 “OFF” 상태를 토글 할 수 있는 버튼을 렌더링 합니다.

class ClickButton extends React.Componnent {
    constructor(props) {  // 생성자
    	super(props)
        this.state = {isToggleOn: true};  // state 추가
        this.handleClick = this.handleClick.bind(this);  // 콜백에서 this를 동작시키기 위한 바인딩
    }
    
    handleClick() {  // handleClick 호출시 state 값을 변경
    	this.setState(state =>> ({
        	isToggleOn: !state.isToggleOn
        }));
    }
	
    render() {
        return (
            <button onClick={this.handleClick}>  // click 이벤트 발생하도록 지정
            	{this.state.isToggleOn ? 'on':'off'}  // this의 state에서 isToggleOn의 boolean 값에 따라 문구 변경
            </button>
        )
    }
}

이벤트 핸들러에 인자 전달하기

루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다. 예를 들어, id가 행의 ID일 경우

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달됩니다.