React의 setState 함수에서 “this is undefined” 오류 문제 해결 – Arrow Function과 .bind() 메소드를 사용하여 이슈 해결하기

함수 내에서 React의 setState: ‘this’가 정의되지 않음

React에 처음 입문하고 ‘this’를 사용하여 setState로 상태를 설정하는 함수 내에서 ‘this’가 정의되지 않는 문제를 겪고 있다면 걱정하지 마세요. 이 블로그 포스트에서는 ‘this’가 정의되지 않는 일반적인 문제를 다루고 이를 해결하기 위한 두 가지 해결책을 알아보겠습니다.

문제점

이슈가 발생하는 코드 스니펫을 살펴보겠습니다:

var ItemComponent = React.createClass({
    // ...

    MyAction: function() {
        this.doFetch().then(function(response){
            this.setState({
                the_message: response.message
            });
        });
    },

    // ...
});

위의 코드에서는 ‘MyAction’이라는 함수가 특정 요소를 클릭할 때 트리거됩니다. 이 함수 내에서 ‘this’를 사용하여 ‘doFetch()’를 호출하고 ‘this.setState()’를 사용하여 컴포넌트의 상태를 업데이트합니다. 그러나 ‘doFetch()’의 promise가 해결되면 ‘this’ 컨텍스트가 손실되고 정의되지 않은 상태가 됩니다.

해결책 1: 화살표 함수

이 문제를 해결하는 한 가지 방법은 화살표 함수를 사용하는 것입니다. 화살표 함수는 렉시컬 스코프를 유지하기 때문에 다음과 같이 코드를 수정할 수 있습니다:

MyAction: function() {
    this.doFetch().then((response) => {
        this.setState({
            the_message: response.message
        });
    });
},

promise 해결 콜백으로 화살표 함수를 사용함으로써 ‘this’ 컨텍스트가 자동으로 주변 스코프에서 상속되어 문제없이 ‘setState’에 액세스할 수 있습니다.

해결책 2: 컨텍스트 바인딩

화살표 함수를 사용하지 않고 다른 해결책은 ‘bind()’ 메서드를 사용하여 컨텍스트를 명시적으로 바인딩하는 것입니다:

MyAction: function() {
    this.doFetch().then(function(response){
        this.setState({
            the_message: response.message
        });
    }.bind(this));
},

내부 함수에서 ‘.bind(this)’를 호출함으로써 ‘this’ 컨텍스트가 동일하게 유지되고 컴포넌트 인스턴스를 참조하도록 보장합니다.

결론

이 블로그 포스트에서는 React에서 ‘this’를 사용하여 setState로 상태를 설정하는 함수 내에서 발생하는 일반적인 문제를 살펴보았습니다. 우리는 두 가지 해결책에 대해 알아보았는데, ‘this’의 렉시컬 스코프를 유지하기 위해 화살표 함수를 사용하거나 ‘bind()’ 메서드를 사용하여 컨텍스트를 명시적으로 바인딩할 수 있습니다. 이러한 해결책을 구현함으로써 ‘this’의 정의되지 않은 오류를 해결하고 React 컴포넌트 내에서 상태를 성공적으로 업데이트할 수 있습니다.

기억해야 할 점은 React를 사용하여 개발할 때 이러한 문제를 이해하고 문제 해결을 위해 노력하는 것이 중요합니다. 이 블로그 포스트가 여러분이 문제를 이해하고 해결책을 제공하는 데 도움이 되었기를 바랍니다.

참고 자료 : 

reactjs