JavaScript bind 함수는 뭐지??

28.04.2021 — JAVASCRIPT, 2021 — 5 min read

React 로 만들어진 코드 예시 를 찾다 보면 JavaScript bind 함수를 사용하는 코드를 심심치 않게 볼 수 있습니다. 그런데 최근의 React 코드에서는 좀 처럼 찾아 볼 수 없는데,

왜 과거에는 사용하였지만 최근에서는 잘 사용하지 않는 걸까요?

JavaScript bind 함수

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

> bind()함수는 새로운 바인딩한 함수를 만듭니다.
> 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체exotic function object입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.

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

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

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() {
        // console.log(this); //Page
        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 함수를 함께 사용합니다.

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>
        );
    }
}

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

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

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

위의 코드에서는 bind 대신 add 함수를 화살표 함수로 변경 하였습니다. 실행해 보면 오류 없이 동작하는 것을 확인할 수 있습니다.

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

function Button({ onClick }) {
    return <button onClick={onClick}>+</button>;
}

function Page() {
    const [num, setNum] = useState(0);

    const add = () => {
        setNum(num + 1);
    };

    console.log(this); //Window
    return (
        <div>
            <Button onClick={add} />
            <h1>{num}</h1>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Page></Page>, rootElement);

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

결론

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