[React] 리액트에서 메서드 바인딩(binding)하기

클래스형 컴포넌트를 다루면서 이벤트 핸들러에 함수를 등록하는 과정에서 this를 제대로 불러오지 못했다. 어떻게 작성하는지에 따라 this 값이 달라지는 것이었다. this는 호출자에 의해 동적으로 결정된다. 따라서 this를 바인딩하여 원하는 값으로 불러올 수 있는 4가지의 방법들을 살펴보겠다.

 

1. bind() 메서드

this.이벤트명 = this.이벤트명.bind(this);

 

사용자가 만든 일반 함수를 bind 메서드를 통해 this로 사용할 객체를 전달하는 것이다.

bind 메서드는 새롭게 this 값이 교체된 함수를 반환한다. 함수를 반환할 뿐이지 호출하지는 않기 때문에 apply, call 메서드와 다르게 이후에 직접 실행해야 한다.

 

위의 코드는 constructor() 또는 render()에 넣는 2가지의 방법이 있다.

 

class Container {
  constructor(props){
    super(props);
    this.state = { age: 0 }
    this.handleClick = this.handleClick.bind(this); // (1)
  }
    
  handleClick() {
    this.setState({ age: 20 })
  }

  render(){
    return (
      <>
        <button onClick={this.handleClick}>클릭</button> // (1)
        <button onClick={this.handleClick.bind(this)}>클릭</button> // (2)
      </>
    )
  }
}

 

(1)의 경우, constructor()에서 바인딩 처리를 하여 이벤트 핸들러에 단순 함수명만 넣어준 것이고

(2)의 경우, render() 안 해당 이벤트 핸들러에서 바인딩 처리를 해준 것이다.

 

2. 화살표 함수로 선언하기

아예 커스텀 메서드를 화살표 함수로 선언하는 방법도 있다.

 

화살표 함수로 작성하면 this가 정적으로 결정된다. 기존의 바인딩 규칙을 무시하고 상위 스코프 중, 화살표 함수가 아닌 가장 가까운 함수의  this를 가리킨다.

 

class Container {
  constructor(props){
      super(props);
        this.state = { age: 0 }
    }

    handleClick = () => {
      this.setState({ age: 20 })
    }

    render(){
      return(
          <button onClick={this.handleClick}>클릭</button>
        )
    }
}

 

3. 화살표 함수로 등록

일반 함수로 선언된 메서드를, 이벤트 핸들러에서 화살표 함수로 등록한다. event 인자는 수동으로 전달해야 한다. 하지만 이 방법은 권장되지 않는다. 매번 렌더링 할 때마다 다른 콜백으로 생성되기에, 해당 콜백이 하위 컴포넌트로 전달될 때 하위 컴포넌트들도 재렌더링될 가능성이 있다. 불필요한 렌더링이 일어나는 것이다.

 

class Container {
  constructor(props){
      super(props);
        this.state = { age: 0 }
    }

    handleClick() {
      this.setState({ age: 20 })
    }

    render(){
      return(
          <button onClick={(e) => this.handleClick(e)}>클릭</button>
        )
    }
}

 

---

관련 이전 글)

 

https://realzzu.tistory.com/153

[JS] this란? 바인딩 및 일반 함수 vs 화살표 함수 알아보기