ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • react의 bind는 무엇일까? (부제. 이벤트 처리하기)
    Study/React 2020. 7. 5. 20:02

     

    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 cliked.');
        }
        
        return (
        	<a href="#" onClick={handleClick}>
            	Click me
            </a>
        );
    }

     

    React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해

    addEventListener를 호출할 필요가 없다.

    대신, 엘리먼트가 처음 렌더링 될 때 리스너를 제공하면 된다.

     

    ES6 클래스를 사용하여 컴포넌트를 정의할 때, 

    일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다. 

     

    예를 들어, 다음 Toggle 컴포넌트는 사용자가 'on'과 'off'상태를 토글 할 수 있는 버튼을 렌더링 한다.

     

    class Toggle extends React.Component {
    	constructor(props) {
        	super(props);
            this.state = {isToggleOn: true};
            
            // 콜백에서 'this'가 작동하려면 아래와 같이 바인딩 해주어야 한다.
            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의 의미에 대해 주의해야 한다.

     

    JS에서는 클래스 메서드는 기본적으로 바인딩되어 있지 않다.

    this.handleClick을 바인딩 하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined된다.

     

    이는 React만의 특수한 동작이 아니며, JS에서 함수가 작동하는 방식의 일부이다.

     

    일반적으로 onClick={this.handleClick} 과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우,

    해당 메서드를 바인딩 해야한다.

     

    만약 bind를 호출하는 것이 불편하다면, 이를 해결할 수 있는 두 가지 방법이 있다.

     

    실험적인 퍼블릭 클래스 필드 문법을 사용하고 있다면 클래스 필드를 사용하여 콜백을 올바르게 바인딩 할 수 있다.

     

    class LoggingButton extends React.Component {
    	//이 문법은 'this'가 handleClick 내에서 바인딩 되도록 한다.
        //주의: 이 문법은 아직 *실험적인* 문법이다.
        handleClick = () => {
       		console.log('this is:', this);
        }
        
        render() {
        	return (
            	<button onClick={this.handleClick}>
                  Click me
                </button>
            );
        }
    }

     

    create React App 에는 이 문법이 기본적으로 설정되어 있다.

     

    만약 클래스 필드 문법을 사용하고 있지 않다면, 콜백에 화살표 함수를 사용하는 방법도 있다.

     

    class LoggingButton extends React.Component {
    	handleClick() {
        	console.log('this is:'. this);
        }
        
        render() {
        // 이 문법은 'this'가 handleClick내에서 바인딩되도록 한다.
        	return (
            	<button onClick={() => this.handleClick()}>
                	Click me
                </button>
            );
        }
    }

     

     

    그러나 이 문법의 문제점은 LoggingButton이 렌더링 될 때마다 다른 콜백이 생성된다는 것이다.

    대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면, 

    그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있다.

     

    이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인딩하거나 클래스 필드 문법을 사용하는 것을 권장한다.

     

     

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


    루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적이다.

    예를들어 id가 행의 ID 일 경우, 다음 코드가 모두 작동한다.

     

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

     

    위 두 줄은 동등하며 각각 화살표 함수와 Function.prototype.bind를 사용한다.

     

    두 경우 모두 리엑트 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달된다.

    화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우, 추가 인자가 자동으로 전달된다.

     

     

     

     

    출처: https://ko.reactjs.org/docs/handling-events.html

    댓글

Designed by Tistory.