📖리액트) 이벤트 생성,state 변경...

# 이벤트 생성과 이벤트 막기 

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

onClick은 버튼을 클릭했을 때 경고창 "hi"가 작동한다

 

여기서 문제점은 클릭 할 때 마다 리로드가 된다는 것이다 (by a태그)

 

<h1><a href="/" onClick= {function(e){
            console.log(e);
            e.preventDefault(); //이벤트와 이벤트 막는방법 알게됨
          }}>{this.state.subject.title}</a></h1>

 

preventDefault는 기본적인 동작을 막는다라는 뜻으로

 

이제 해당 태그를 클릭해도 리로드가 되지 않는 것을 알 수 있다. 

 

 

# 이벤트에서 state 변경하기

 

<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>

 

이 코드의 목적는 태그를 클릭했을  때 mode가 'welcome'으로 바뀌어서

state도 함께 변경되는 것이다

 

하지만 이런식으로 하면 오류가 발생하므로

setState(), .bind()를 활용한다

 

<h1><a href="/" onClick= {function(e){
            console.log(e);
            e.preventDefault(); //이벤트와 이벤트 막는방법 알게됨
            this.setState({
              mode: 'welcome'
            });
          }.bind(this)}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}
        </header>

 

bind를 써야 {this.state.subject.title} 부분의 state가 무엇을 뜻하는지 알게 된다

 

여기서 bind의 예시를 들어보겠다

 

var jch = {name: 'jeon'}

function bind1 () {
    console.log(this.name)
}

bind1() 
//결과 -> VM884:1 Uncaught ReferenceError: bind1 is not defined
//    at <anonymous>:1:1 <- 오류
//당연히 bind1의 this에 대한 값이 없으니까

var bind2 = bind1.bind(jch);
bind2();
// 결과 -> jeon

이것이 bind라는 함수가 하는 일이다 ㅎㅎ

 

 

 

 

: 이 포스트는 생활코딩님의 'React' 강의영상을 보며 배운것들을 기록하였다🙂