[React] setState , bind 함수 이해하기

 

setState

props와는 다르게 state 값을 변경할 때는 state를 직접 조작해서는 안되며(this.state.mode = "~~"  이렇게 하면 안됩니다) 변경이 필요할 때는 setState메소드를 이용해야합니다.

 

왜냐하면 React.js의 경우 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링을 하는데 setState메소드를 사용하지 않고 직접 state 값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 못합니다. 

 

 

즉 예를 들어 mode 값을 변경할때 this.setState({ mode: 'welcome' }); 말고 this.state.mode='welcome'로 변경을 하게 되면 react는 변경 사실을 모르고 그 이후의 작업을 하지 않습니다.

 

bind

render()안에서는 this가 컴포넌트 가리키지만 onClick() 안에서의 this는 bind(this)를 해주지 않으면 컴포넌트를 가리키

지 않는다.  그래서 bind(this) 라는 것을 해줘야한다. 

 

bind의 쓰임을 예를 들어 살펴보자.

var obj = {name: 'egoing'}

function bintTest(){
console.log(this.name);
}

--> 만약에 bindTest()를 실행하면 아무것도 실행되지 않을 것이다. 왜?? this 가 무엇인지 모르기때문이다.

 

하지만 이렇게 bind(obj)를 뒤어 써주면 함수 안의 this의 값이 obj 값으로 변경된다.
var bindTest2 = bindTest.bind(obj);
즉, egoing이라는 값이 로그 값으로 출력된다.

 

 

사진에 있는 코드는 즉 App의 객체를 onClick안으로 주입시켜 this 를 App의 객체처럼 사용할 수 있게 하는 것이다.