[ReactJS error] event로 호출되는 함수 내의 함수가 안불러지는 이유?

문제

<select id="country" onChange={this.selectCountry}>
</select>

이 코드는 class component의 render함수의 리턴값 안에 있다.

나는 이렇게 select태그를 바꾸면 selectCountry를 호출하고자 했는데, selectCountry 안에서

 selectCountry(){
        var selectedCountry = document.getElementById("country").value;
        document.getElementById("countrytxt").innerHTML = "country: " + selectedCountry;
        this.makeCityList(selectedCountry);
    }

이렇게 class의 메소드 makeCityList를 호출하려고 하면 아래와 같이 "TypeError: Cannot read property '함수이름' of undefined"라는 오류가 계속 나타났다.

그래서 계속 인터넷을 검색한 결과 bind()라는 함수가 나왔다.

---

해결

참고: https://reactjs.org/docs/handling-events.html

Handling Events – React

---

내용을 살펴보면

이와같이 리액트에서는 함수를 위와 같이 호출하는데

만약 저 함수 안에서 해당 클래스의 state를 변경하거나, 함수를 호출하면 나와 같은 오류가 뜬다ㅏ.

 

그래서 이벤트를 설정한 함수에 대해서는 class의 constructor에 bind로
내 함수를 이 component와 연결시켜주어야 한다.

class MainHome extends React.Component{
    
    constructor(){
        super(); // this is required
        this.state = {
            isDataLoading: true,
            country: [],
            city: []
        }
        this.getCity();
        
        // This binding is necessary to make `this` work in the callback
        this.selectCountry = this.selectCountry.bind(this);
    }

나도 이를 적용하였더니 오류가 없어졌고,

이벤트로 호출한 함수 내에서 내 클래스의 함수를 사용할 수 있게 되었다ㅠㅠㅠ