이벤트에서 state 변경하기(bind, setState)

다음은 링크를 클릭했을 경우, 이벤트처리가 되어서 밑에 text값이 변경되게 하는겁니다. mode값을 텍스트로 수정하는것이 아닌, 클릭으로 수정하게 하는 방법입니다.

 

 

그렇게 하려면 render에 선언된 state와 return에 있는 state를 연결시키면 됩니다.

 

 

 

1. bind(this)

this.state 와 bind(this)

바로 이벤트 함수가 끝난 후, bind(this)를 선언해줍니다. 왜냐하면 무작정 event함수안에 this를 선언해버리면

"TypeError: Cannot read property 'state' of undefined" 오류가 생기기 때문입니다.

그런데 이렇게 선언해도 문제가 됩니다. this.state.mode = 'welcome' 은 state값이 변한다는걸 모르게하는 소스코드이기 때문이죠.

 

 

 

2. setState

react사용 설명서에 따르면,

다음과 같이 선언을 해야지 render에 state값이 변경되는것을 인지하게 됩니다.