Event

- 링크를 클릭하면 다른 메시지가 출력되도록 함.

- React 에서는 Props나 State값이 바뀌면, 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출된다.

- 아래는 event의 설치와 event의 기본적인 동작을 방지하는 code 이다.

//App.js 중에서 render()
  render() {
    console.log('App render')
    var _title, _desc = null;
    if (this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    } else if (this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className="App">
        {/*<Subject
          title = {this.state.subject.title}
        sub= {this.state.subject.sub}></Subject>*/}
// 이 부분을 주시하자
        <header> 
          <h1><a href = "/" onClick={function(e){
            console.log(e);
            e.preventDefault();
            // this.state.mode = 'welcome'
          }}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content></Content>
      </div>
    );
  }

 

- code 상의 주석처리 된 this.state.mode = 'welcome'는 오류가 나는데 그 이유는

  이벤트가 호출됐을때 실행되는 함수 안에서는 this의 값이 컴포넌트를 가리키지 않고 아무것도 가리키지 않고 있다.

   > .bind(this) 로 사용하면 오류가 해결된다.

  이것을 고쳐도 똑같이 오류가 발생하는데, 이것은 리액트가 코드가 바뀌었다는것을 모르기 때문이다.

   > this.setState 라는 함수를 사용해야 한다.