[React] 비동기 통신에서 this가 먹지 않을 때

개요

HTTP 비동기 통신 중 반환 부분에서 this가 예상대로 작동하지 않아 컴포넌트 내 함수와 객체를 사용할 때 발생하는 오류를 해결해 보자.

문제점

http 비동기 통신할 때 결과 return 부분(then {})에서

컴포넌트 내 함수 및 객체 이용을 위해 this를 쓰면 먹지 않는 오류가 있었다.

반응형

해결책

var self = this

 

비동기 통신 이전 this를 변수에 저장한 다음 해당 변수를 this 용도로 사용해야 한다.

ex)

self.state.orderIdx

 

이유

return 부분에서 this를 사용할 경우 리액트는 this를 http return을 날린 서버 쪽의 this로 판단한다.

비동기 depth 1까지는 컴포넌트 내 this로 자동 변환해주는데

depth2부터는 얄짤 없다.