React 03. Handling Events

React에서의 Handling event는 DOM elements에서의 Handling evnet와 유사하다. 다만 React에서는 아래의 몇 가지 주의할 점을 정리해보자.

Handling Event 사용법

• React events는 camelCase 표기법으로 나타낸다.
• event handler를 넘길 때 JSX 문법으로 넘긴다.

• HTML

    <button onclick="activateLasers()">
        Activate Lasers
    </button>
  

• React

    <button onClick={activateLasers}>
        Activate Lasers
    </button>
  

또 하나 주의할 점은 React에서는 default behavior을 방지하기 위해 ‘false’를 return 할 수 없다.

• HTML

    <form onsubmit="console.log('submit'); reutrn false">
        <button type="submit">Submit</button>
    </form>
  

• React

    function Form() {
        function handleSubmit(e) {
            e.preventDefault();         // Form이 Submit 되는 default behavior를 방지한다.
            console.log('submit');
        }
  
        return(
            <form onSubmit={handleSubmit}>
                <button type="submit">Submit</button>
            </form>
        )
    }
  

React에서는 일반적으로 DOM element에 listener를 붙이기 위해 addEventListener를 호출할 필요가 없다. React에서는 element가 최초로 그려질 때 listener를 제공한다.

Function Bounding in Javascript

Javascript에서 Class method는 기본적으로 바운딩 되지 않는다. 만약 onClick={this.handleClick}과 같이 뒤에 ()가 없는 method를 참조할 경우 반드시 바인딩이 되어야 한다.

    class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isToggleOn: ture};

            this.handleClick = this.handleClick.bind(this);
        }

        handleCilck() {
            this.setState(prevState => ({
                isToggleOn: !prevState.isToggleOn
            }));
        }

        render() {
            return (
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                </button>
            )
        }
    }

    ReactDOM.render(
        <Toggle />,
        document.getElementById('root')
    );