> ## Content Index
> Fetch the complete content index at: https://www.popit.kr/llms.txt
> Use this file to discover other available public pages before exploring further.

# 그 많던 bind 함수는 다 어디로 갔을까?
- URL: https://www.popit.kr/where-did-all-the-bind-functions-go/
- Published: 2021-05-26T08:04:47.000Z
- Updated: 2021-05-26T08:04:47.000Z
- Author: gwiyeomgo
- Tags: #소프트웨어, JavaScript, 리액트, 바인드, 화살표 함수, 함수형컴포넌트, this 키워드

[React로 만들어진 코드 예시](https://codesandbox.io/s/dynamically-add-and-delete-input-fields-in-form-using-react-js-forked-bo6d4?file=/src/components/bookView.js:0-1888&ref=popit.kr)를 찾다 보면 [JavaScript bind 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global%5FObjects/Function/bind?ref=popit.kr)를 사용하는 코드를 심심치 않게 볼 수 있습니다.  
그런데 최근의 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**](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this?ref=popit.kr) 연산자와 연관성이 많습니다.  
React 코드로 예를 들어 보겠습니다.

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

```js
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 문제**](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow%5Ffunctions?ref=popit.kr#%EB%B0%94%EC%9D%B8%EB%94%A9%5F%EB%90%98%EC%A7%80%5F%EC%95%8A%EC%9D%80%5Fthis)'라고 합니다.

bind를 사용하면'[**바인딩되지 않는 this 문제**](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow%5Ffunctions?ref=popit.kr#%EB%B0%94%EC%9D%B8%EB%94%A9%5F%EB%90%98%EC%A7%80%5F%EC%95%8A%EC%9D%80%5Fthis)'를 해결할 수 있습니다.

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

```js
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 함수 대신 아래와 같이 변경할 수 있습니다.  

```js
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에서 도입된 함수형 컴포넌트를 사용하는 것입니다.  

```js
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문제'가 자연스럽게 해결되면서 더 이상 쓸 필요가 없어진 것으로 보여집니다.