[생활코딩] React 스터디 #4 이벤트

동적인 웹페이지를 만들기 위한 이벤트

 

1. Event

props, state, event가 서로 상호작용을 하면서 역동적인 웹페이지를 만들어준다.

이번 강의에서는 onClick()을 이벤트를 사용해서 글자를 클릭했을 때 state값을 바꿔보도록 하였다.

이전에 작성했던 App Component에서 Subject태그의 부분을 잠깐 살짝 바꿔보도록 하자.

 

<a href="/" onClick={function(e){ onClick 함수가 실행됐을 때 할 행동 }</a>

1) 이벤트가 발생했을 때 기본적인 동작 멈추게 하는 방법

e.preventDefault(); //이벤트가 발생했을 때 기본적인 동작 방법을 멈추게 함

*debugger을 사용하면 잠깐 실행을 멈추고 기다린다.

 

 

2) onClick 함수가 실행되었을 때 state를 바꿔보기

this.state.mode='welcome';

이런 에러가 뜬다.

 

이 event가 호출되었을 때 this는 component를 가리키는 게 아니고 아무것도 가리키지 않는다. 그래서 undefined 값을 읽는 것을 할 수 없다고 하는 것이다.

 

이 this가 component를 가리킬 수 있는 방법은 함수의 뒤에 .bind(this)를 붙이면 된다.

 

<a href="/" onClick={function(e){ //camel code
        console.log(e);
        e.preventDefault(); //이벤트가 발생했을 때 기본적인 동작 방법을 멈추게 함
        this.state.mode='welcome'; //아무 값도 setting되어있지 않음
}.bind(this)}>

 

하지만 이 경우에도 아무일도 일어나지 않는다. 리액트에 전달하는 방법이 아니기 때문이다.

 

 

해결방법)

<header>  
      <h1><a href="/" onClick={function(e){ //camel code
        console.log(e);
        e.preventDefault(); //이벤트가 발생했을 때 기본적인 동작 방법을 멈추게 함
        this.state.mode='welcome'; //아무 값도 setting되어있지 않음
        this.setState({mode:'welcome'});
        // debugger; //이 부분에서 실행을 멈추고 기다림
      }.bind(this)}>{this.state.subject.title}</a></h1>
        {this.state.subject.sub}
</header>

 

이렇게 setState함수를 사용해서 mode를 객체로 전달해주면 된다. 

 

render 함수 안에서 this는 현재 component를 가리키는데 onClick 함수 안의 this는 아무 값이 없다. 여기서 원리가 뭐냐?! 해서 알려주실 줄 알았는데 모르신다고 해서.... 궁금증만 늘어났다.

 

이때 bind함수를 사용하면 그 함수 안에서 this가 객체를 되게끔 한다.