220320 React 바인딩

바인딩

• 리액트에서의 바인딩을 알기 전에
  자바스크립트에서의 this와 바인딩을 알고 있어야 한다

Javascript this

• 자바스크립트에서 객체 안 메서드에서
  this는 그 메서드가 포함된 object를 의미

var A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
A.sayHello(); //"Hello"

• 여기서 this는 A를 의미하며,
  A의 prop인 Hello를 받아 출력한다.

• 그러나 밑의 예제처럼

var A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
let B = A.sayHello; // undefined
console.log(B);

• A.sayHello를 B에 할당하고 이를 출력해보면 undefined가 출력된다
• 이유는 this가 B라는 변수에 담길 때, A와의 관계가 상실되기 때문이다
• 이럴 때 필요한 것이 바인딩 (binding)

바인딩 (binding)

var A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
let B = A.sayHello.bind(A);
console.log(B); // Hello

• Bind의 사전적 의미는 묶다
• A.sayHello를 전달할 때, A까지 바인딩 시켜서 보내면 된다
• 리액트 역시 자바스크립트의 this가 사용되기 때문에 바인딩이 필요하다

리액트에서의 바인딩

• 리액트에서 주로 사용하는 방법은 생성자에서 바인딩하는 것

• 아래 예제는 오류를 잃으키는 예제

class EventBind extends Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello'
    }
  }

  handleClick() {
    this.setState({
      message: 'Goodbye!' // 클릭하면 Goodbye 바뀌는 함수 
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClick}>Click</button>
      </div> // 온클릭 이벤트와 함수 연결 
    )
  }
}

• 버튼을 눌러 Hello를 Goodbye로 만드는 예제

• 이렇게 하면 버튼을 눌렀을 때, Cannot read property 'setState' of undefined 에러가 발생

• 그래서 바인딩이 필요하다

Constructor 안에서 바인딩

• 아래 예제는 주로 많이 쓰이는 바인딩 방법으로,
  공식 문서에서 소개하는 방법이다

class EventBind extends Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello'
    }

    this.handleClick = this.handleClick.bind(this); // 바인딩!!!!!!!!!!!
  }

  handleClick() {
    this.setState({
      message: 'Goodbye!'
    })
    console.log(this) // EventBind
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button
          onClick={this.handleClick}> // 이벤트와 함수 연결 
          Click
          </button>
      </div>
    )
  }
}

화살표 함수 바인딩

• ES6부터 등장한 화살표 함수를 사용하면,
  자동으로 바인딩이 된다고 한다