React 스터디노트 #3. 이벤트

this.state = {
	mode: 'welcome',
	subject: //...
	//...
}

render() {
	if(this.state.mode === 'welcome'){
	//...
	} else if(this.state.mode === 'read'){
	//...
    }
}

- props의 값이나 state의 값이 바뀔 때마다 그 컴포넌트의 render()함수가 다시 호출되고, 그리고 그 하위에 있는 컴포넌 트들의 render()도 호출되기 때문에 화면이 싹 다시 그려진다.

- console.log('...'); 하면 콘솔에 프린트를 할 수 있다.

- debugger; 를 만나면 브레이크 포인트 쓰듯이 실행 시 저 부분에서 멈춘다.

 

- HTML로 보이지만 이건 유사 HTML이다. 규칙을 따라야한다.

<h1><a href="/" onClick={function(){
	alert('h1');
}}>{this.state.subject.title}</a><h1>

- 이벤트에서 기본적인 동작을 못 하도록 막고 싶은 때에는

e.preventDefault();

라고 하면 된다.

 

- BUT, 여기서 어려운 것은 이벤트 안 scope에서의 this는 아무 것도 가리키고 있지 않기 때문이다.

- 해결방법은, 1) 함수가 끝난 직후에 bind(this)라고 해주면 바인딩 되고,

                  2) setState라는 함수를 사용해서 state가 바뀌었음을 알려줘야한다.

<h1><a href="/" onClick={function(){
	e.preventDefault();
    // this.state.mode = 'welcom'; 이라고 하면 될 것 같지만 안됨.
    // react만의 사용설명서를 따라서 아래와 같이 state가 바뀌었음을 알려줘야함.
    this.setState({
    	mode: 'welcome'
    });   
}.bind(this)}>{this.state.subject.title}</a><h1>

 

- 이벤트 bind 함수 이해하기

var obj = {name:'aroma'};

function bindTest(){
...
}

var bindTest2 = bindTest.bind(obj);

- bind()의 첫 번째 arg가 bindTest2의 this가 된다.

 

- 동적으로 state 값을 바꿀 땐, Constructor에서 설정하는 것처럼 state를 바꾸면 안된다. 리액트 입장에서는 몰래 바꾼 것 같은 느낌이다. 바뀌긴 바뀌는데 react는 알 수 없다. => 그래서 setState를 사용해서 알려줘야 한다.

 

/* App.js*/

<Subject
    title=...
    sub=...
    onChangePage={function(){
    	this.setState({mode:'welcome'});
    }.bind(this)}
>
</Subject>

/* Subject.js */

<h1><a herf="/" onClick={function(e){
    e.preventDefault();
    this.props.onChangePage();
}.bind(this)}>{this.props.title}</a></h1>

(여기는 잘 이해가 안되지만 이해한만큼만이라도 적어보겠다)

- Subject 태그에 해당하는 부분은 따로 만들어둔 Subject.js에 있고, state와 props로 소통한다.

 

 

 

** 참고: 이고잉님의 React 강의: https://opentutorials.org/module/4058/24740

이벤트 - React