[React] event에서 state 변경 (feat. bind, setState)

state를 세팅해놓은 작업과 event를 설치한 작업을 연결시킬 것이다.

 

하려고 하는 것!

WEB이라는 글씨를 누르면 App이라는 컴포넌트의 값을 mode로 바꾸고 싶다.

e.prevenDefault 아래에 this.state.mode= 'welcome' 을 쓰면 오류가 나는데 여기에는 두 가지 에러를 포함하고 있다.

 

1. event가 호출됐을 때 실행되는 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가르키는 것이 아니라, 아무 값도 셋팅되어있지 않다.  

=> 해결방법: 함수가 끝나는 직후에 .bind(this) 를 추가해서 함수 안에서 this는 우리의 컴포넌트가 될 수 있도록 한다.

2. 하지만 코드를 작성하고 WEB을 눌러도 welcome 모드로 바뀌지 않는데
=> 이유는 리액트는 state 값이 바뀌었다는 걸 모르기 때문이다.

리액트의 사용설명서에는 이것을 setState 함수의 인자로 mode 값을 넣어 mode 값을 바꾼다.

 

 

Bind 함수 자세히 이해하기

render 함수가 호출될 때 함수 안에서 this는 render 함수가 속해있는 컴포넌트 자체를 가리키는데

onClick에 연결된 함수 등은 this가 아무 값도 없다.

var obj = {name:'narang'};
function bindTest(){
   console.log(this.name);
}

// bindTest 함수 안의 this는 obj가 되는 함수가 새로 생기는 것 같은(복제처럼) 동작을 한다.
var bindTest2 = bindTest.bind(obj);

그래서 사진에서 쓰인 bind(this)는 App이라는 컴포넌트 자체를 가리키는 객체를 onClick과 연결된 함수 안에 넣어서 이 함수 안에서 this는 그 객체는 App 컴포넌트가 되는 것이다. 

 

 

State 값을 직접 변경하지 않고 함수의 형태로 변경하는 이유

생성자, App 컴포넌트가 생성될 때 가장 먼저 실행되는 construnctor 함수에서는 

이런 식으로 state를 설정, 수정할 수 있다.

 

하지만 이미 컴포넌트가 생성이 끝난 다음에 동적으로 state 값을 바꿀 때는 왼쪽과 같이 하면 안됐었다.

오른쪽처럼 해야한다. 왼쪽은 리액트 몰래 state를 바꿔버린 것이다. 그래서 rendering을 함수 없다.

setState 함수에 변경하고 싶은 값의 객체형태로 주는 것을 통해서 수정해야한다. 

state 모드의 값을 바뀐 것을 리액트가 알았다면 안에서는 어떻게 동작하냐?

render 함수들이 호출된다. 서브 컴포넌트도 마찬가지!

화면의 내용도 바뀔 것이다.