React welcome ==> read 로 변경해보자.

저번 글에서 welcome 이벤트를 위한 준비를 했다. 

이제 WEB 이라는 링크를 통해 mode 가 welcome 에서 read 로 변경이 되게 해볼 것이다.

 

WEB 이라는 <a> 태그를 사용하기 위해서는 Subject 컴포넌트를 수정해야 하는데, 

 

{/* <Subject

        title={this.state.subject.title}

        sub={this.state.subject.sub}>

        </Subject> */}

기존의 Subject 컴포넌트를 꺼내서 App 컴포넌트 안으로 옮길것이다. 

      <div className="App">

        <header>

          <h1><a href="1.html" onClick={function(e) {

            console.log(e);

            e.preventDefault();

            this.state.mode= 'welcome';

            this.setState({

              mode:'read'

            });

          }.bind(this)}>{this.state.subject.title}</a></h1>

          {this.state.subject.sub}

        </header>

        <TOC data={this.state.contents}></TOC>

        <Content title={_title} desc={_desc}></Content>

      </div>

 

현재 실습은 여기까지 진행을 했다. 

<a> 태그를 꺼내와서 onClick 이벤트를 함수로 실행하는데, 

함수의 e 값은 기본적으로 들어가는 값으로, 해당페이지가 계속 새로고침 되는 것을 방지하고자

e.preventDefault() 를 줘서 새로고침을 못하게 강제로 만들었다. 

 

그리고 a 태그의 this.state.mode='welcome' 으로 지정을 해주었고, 

constructor 안에 state 값을 변경하는 것은 가능하지만, 생성된 후 state 값을 변경할땐, setState를 이용한다.

welcome 에서 read 로 state.mode 값이 변경되기 때문에 setState 를 이용해야 하고, 

 

이벤트 함수(onClick) 안에서 this 는 아무것도 가르키지 않는다고 한다. 왜인지는 아직 모르겠으나,

onClick 이벤트를 사용할 때는 뒤에 .bind(this) 를 써줘야 한다.

 

마지막으로 bind 에 대해서 이해한 내용을 정리해 볼 것이다. 

bind 는 함수에서 this 가 누구를 가르킬지 알려주는 매서드 인것같다.

 

컴포넌트 안에서 this 를 쓰면 이 this 는 해당 컴포넌트를 가르키지만 !

함수 안에서의 this 는 undefined 가 나온다. 이는 this 가 무얼 가르키는지 모르기 때문이다.

 

그래서 우리는 .bind() 매서드를 이용해서 함수 안에서 사용하는 this 는 이 컴포넌트를 가르킨다고

알려줘야 한다. 그래서 함수에서 this 를 사용 할 경우 .bind() 매서드를 사용해야 this 를 찾고,

원하는 이벤트를 실행할 수 있다.

 

,

,

,

 

WEB 이라는 <a> 태그를 눌렀을때 정상적으로 mode 가 welcome ==> read 로 변경이 되었다. 

 

이제 좀 더 다양한 이벤트를 줄 것이다. 

 

오늘 배운 내용.

1. setState 

2. bind( ) 매서드 

3. 함수에는 기본으로 e (event) 값을 주고, e.preventDefault 는 리로드가 되지 않게 막을 수 있다.