리액트 메서드 내 this 바인딩 문제

문제

Route를 사용하여 로그인 페이지에서 메인 페이지를 이동하는 구현 과정에서, 다음과 같이 withRouter를 사용하지 않고 메서드 함수 객체를 props로 넘겨 주는 방식으로 접근하였다.

 

goMain() 메서드에서는 인자 값으로 받은 경로로 이동할 수 있도록 history 객체 props를 사용하였다.

import React, {Component} from 'react';
import Login from '../Login/Login';
import {withRouter} from 'react-router-dom';

class LoginPage extends Component {

    goMain(path) {
        this.props.history.push(path);
    }

    render() {
        return (
            <>
                <Login goMain={this.goMain}/>
            </>            
        )
    }
}

export default withRouter(LoginPage);

 

로그인 화면에서 일정 조건을 만족할 경우에 자식 컴포넌트에서는 props로 전달 받은 메서드인 goMain()에 path 값을 전달하도록 하는 것이 의도한 바 였지만, 다음과 같은 에러가 발생하였다.

error of this binding

goMain()에서는 this.props를 통해 history 객체에 접근하고 있는데, goMain()이 호출된 위치는 해당 컴포넌트가 아닌, goMain을 props로 전달 받은 자식 컴포넌트이기 때문에 this 바인딩 문제가 발생하여 해당 객체에 제대로 접근하지 못한 문제인 것을 확인할 수 있었다.

 

해결

문제를 해결하기 위해 goMain() 메서드 내의 this를 확실하게 부모 컴포넌트에 귀속시킬 필요가 있었다.

 

이를 위해 Funtion.prototpye.bind() 메서드를 사용하기로 하였다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Function.prototype.bind() - JavaScript | MDN

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

 

생성자 함수인 constructor() 내에서 goMain() 메서드를 해당 컴포넌트 this와 바인딩되도록 초기화해주었고, 문제를 해결할 수 있었다.

 

해당 방식 외에도 구글링해보니, 이벤트 props를 전달하는 과정에서는 해당 함수를 화살표 함수로 감싸주어 보내주면 안정적으로 this 바인딩 문제를 해결할 수 있음을 확인하였다.

import React, {Component} from 'react';
import Login from '../Login/Login';
import {withRouter} from 'react-router-dom';

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.goMain = this.goMain.bind(this);
    }

    goMain(path) {
        this.props.history.push(path);
    }

    render() {
        return (
            <>
                <Login goMain={this.goMain}/>
            </>            
        )
    }
}

export default withRouter(LoginPage);

 

관련 포스팅

https://choi95.tistory.com/107

이벤트 핸들러 this 바인딩 문제