React로 만들어진 코드 예시를 찾다 보면 JavaScript bind 함수를 사용하는 코드를 심심치 않게 볼 수 있습니다.

그런데 최근의 React 코드에서는 좀 처럼 찾아 볼 수 없는데, 왜 과거에는 사용했지만 최근에서는 잘 사용하지 않는 걸까요?

JavaScript bind 함수

먼저 bind 의 정의를 찾아보겠습니다. MDN에서 bind를 아래와 같이 정의하고 있습니다.

bind() 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체exotic function object입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다. - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

사실 정의만으로는 bind를 이해하기 어려운데요. 쓰임새 관점에서 살펴보면 주로 this 연산자와 연관성이 많습니다.

React 코드로 예를 들어 보겠습니다.

아래 코드는 버튼을 클릭하면 값이 증가되어 보여지는 단순한 코드 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Button extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>+</button>;
  }
}
class Page extends React.Component {
  state = {
    num: 0
  }
  add() {
    this.setState({ num: this.state.num + 1 });
  }
  render() {
    return (
      <div>
        <Button onClick={this.add} />
        <h1>{this.state.num}</h1>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Page></Page>, rootElement);

Page 컴포넌트의 add 함수를 자식 컴포넌트 즉, Button 컴포넌트에 props 전달하고 있습니다.

하지만 이 코드는 동작하지 않고 undefined 오류가 발생합니다.  그 이유는 Button 컴포넌트에서 전달받은 add 함수를 호출할 때 this가 Page 컴포넌트를 가르키지 않기 때문입니다. 이런 문제를 '바인딩되지 않는 this 문제'라고 합니다.

bind를 사용하면'바인딩되지 않는 this 문제'를 해결할 수 있습니다.

Page 컴포넌트에서 Buttorn 컴포넌트로 add 함수를 넘길 때 bind 함수를 함께 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
class Page extends React.Component {
  add() {
    this.setState({ num: this.state.num + 1 });
  }
  render() {
    return (
      <div>
        <Button onClick={this.add.bind(this)} />  // bind 추가
        <h1>{this.state.num}</h1>
      </div>
    );
  }
}

화살표 함수와 React 함수형 컴포넌트

위의 언급한 '바인딩되지 않는 this 문제' 를 bind 함수 이외에 다른 방법으로 해결할 수 있습니다. 바로 화살표 함수^{Arrow function expression}와 React 함수형 컴포넌트를 사용하는 것입니다.

먼저 화살표 함수를 사용하면 bind 함수 대신 아래와 같이 변경할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Page extends React.Component {
  // 화살표 함수로 변경
  add = () => {
    this.setState({ num: this.state.num + 1 });
  };
  render() {
    return (
      <div>
        <Button onClick={this.add} /> 
        <h1>{this.state.num}</h1>
      </div>
    );
  }
}

위의 코드에서는 bind 대신 add 함수를 화살표 함수로 변경 하였습니다.

실행해 보면 오류 없이 동작하는 것을 확인할 수 있습니다.

두 번째로는 최근 React에서 도입된 함수형 컴포넌트를 사용하는 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Button({ onClick }) {
  return <button onClick={onClick}>+</button>;
}
function Page() {
  const [num, setNum] = useState(0);
  const add = function () {
    setNum(num + 1);
  };
  return (
    <div>
      <Button onClick={add} />
      <h1>{num}</h1>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Page></Page>, rootElement);

함수형 컴포넌트에서는 this 의 사용이 불필요하기 때문에 자연스럽게 '바인딩 되지 않는 this 문제'가 해결됩니다.

결론

'바인딩 되지 않는 this 문제'를 해결하기 위해 과거에는 bind 함수를 사용했으나

최근 화살표 함수와 함수형 컴포넌트의 일반화(혹은 대중화)로 앞서 언급했던 '바인딩되지 않는 this문제'가 자연스럽게 해결되면서 더 이상 쓸 필요가 없어진 것으로 보여집니다.