3-2 event, bind

react에서는 props값이나 state 값이 바뀌면

그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출 된다

그리고 그 하위의 컴포넌트들의 render도 다시 호출 된다 -> 화면이 다시 그려진다.

 

이번에 해볼 것은 Subject에 있는 a태그에 event를 주어서 

state.mode = "welcome" (default) 값을

"read"로 바꾸어 볼 것이다.

이것에 따라서 Content의 내용이 바뀌도록 설정해보았다.

 

a 태그에 onClick={function(e){

    e.preventDefault();

    this.setState({

        mode: "read"})

    }.bind(this)}

 

결과적으로 이렇게 해주면 세팅이 된다

1번째 주의할 것 onclick onClick 소문자로하면 인식을 못한다. 자바스크립트와 다름

2번째 주의할 것 onClick="" 따옴표가아니라 {}로 묶어주어야한다.

3번째 주의할 것 bind(this)를 적어주지 않으면 console.log(this)시 undifined가 출력이 된다.

bind를 통하여 this(APP)를 지정해주는 것

4번째 주의할 것 this.state.mode = "read" 하면 안되나? 해도 console로 잘 바뀐 것을 확인할 수 있다.

but 이렇게 하게 된다면

왠지 모르겠지만 앞서 말한대로 state를 바꾸면 render가 다시 호출 되어야 하지만 호출이 안된다.(화면이 바뀌지 않음)

this.setState({ mode: "read" })로 하게되면 react에서 state가 바뀐것을 인지하고 다시 호출하게 된다.(화면이 바뀜)

 

bind에 대해서 좀 더 설명해보자면

var obj = { name : "taehyeki" }

라는 object가 있고

 

var thisFun = function(){

    console.log(this.name)

}

이라는 함수가 있다고 가정 했을때

thisFun() 해보면 undefind가 뜬다.

 

var thisFun2 = thisFun.bind(obj);

bind 대상을 지정해주고

thisFun2()을 해보면 taehyeki가 뜨는 것을 확인할 수 있다!

 

그럼 의문이 들 수도 있는데 태그 안에서 this를 썼을 때 APP이 나올까?

onClick={console.log(this)}를 해본 결과 App이 잘 떴다.

고로 function 안에서 컴포넌트의 값을 쓰고 싶을 때 bind(this)로 묶어 준다면 활용할 수 있겠다.