React. 이벤트

 

이벤트 state props 그리고 render 함수

props, state, event 가 서로 상호작용하여 애플리케이션의 역동성을 만듦

 

리액트에서 props나 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출되고 그 하위 컴포넌트들의 render 함수들도 다시 호출됨 (render 함수 : 어떤 html을 그릴것인가 결정하는 함수)

 

이벤트 설치

a 태그를 클릭하면 onClick에 설치된 함수가 실행되도록 함

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

 

function에 e라는 인자를 줌으로써 이벤트를 핸들링 할수 있게 해줌
e.preventDefault( ) : 이벤트가 발생한 태그가 기본적인 동작 방법을 하지 않게 만들어 줌

 

<h1><a href="/" onClick={function(){
            e.preventDefault();
            this.setState({
            mode : 'welcome'
            });
          }.bind(this)}>{this.state.subject.title}</a></h1>
          {this.state.subject.sub}

 

a 태그를 클릭하면 화면이 리로드 되는 기본 동작을 하지 않고 this.state.mode 값이 welcome으로 바뀐다.

 

그런데 this.state.mode =’welcome’ 에서 오류가 발생

 

1. 이벤트가 호출됐을 때 실행되는 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가르키지 않고 아무 값도 세팅되어있지 않음

-> 이벤트를 설치할 때 this를 찾을수 없어서 에러가 발생하면 함수 끝난 직후에 .bind(this)를 추가해주면 됨

 

2. 동적으로 state를 바꿀 때는 this.setState( )에 객체 형태로 통해서 바꿔야 함

this.state.mode = 'welcome' ; 이렇게 하면 리액트 입장에서는 몰래 바꾼셈. 값이 바뀌었는지 모름

(* constructer에서는 평소대로 바꿔도 상관없다.)

 

컴포넌트 이벤트 만들기

링크를 클릭했을 때 이벤트를 설치하고 싶다면 함수를 호출하게 하면됨

onChangePage라는 함수를 만듦

 

App.js

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

 

subject라는 컴포넌트에 onChagePage라는 이벤트를 만들고 함수를 설치함

 

 

Subject.js

class Subject extends Component {
    render() {
      return (
        <header>
          <h1><a href="/" onClick ={function(e){
          e.preventDefault();
          this.props.onChangePage(); //링크를 클릭했을때 onChangePage 함수를 호출
          }.bind(this)}>{this.props.title}</a></h1>
        {this.props.sub}
        </header>
      );
    }
  }

  export default Subject;

 

이벤트를 발생해줬을 때(링크를 클릭 했을 때) props로 전달된 onChagePage 함수를 호출

 

결과 : Subject 컴포넌트를 클릭하면 App 컴포넌트의 state 의 mode 값이 ‘welcome’으로 바뀌면서 화면도 바뀜

 

TOC.js

class TOC extends Component {
  render() {
    var lists = [];
    var data = this.props.data;
    var i = 0;
    while (i < data.length) {
      lists.push(<li key={data[i].id}>
        <a
          href={"/content/" + data[i].id}
          data-id={data[i].id}
          onClick={function (e) {
            e.preventDefault();
            console.log(e.target.dataset.id);
            this.props.onChangePage(e.target.dataset.id); //onChangePage 함수 호출에 id를 매개변수로 넣어줌
          }.bind(this)}
        >{data[i].title}</a></li>);
      i = i + 1;
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    )
  }
}

 

1. data-id:

event 객체는 target이라는 속성이 있고 target은 이벤트가 발생한 태그를 가리킴. 여기선 a태그

data- 접두사로 시작되는 속성은 dataset이라는 속성으로 접근 할 수 있다.  

e.target.dataset.id 로 data-id를 찾을 수 있다.

 

2. bind(this, id)

bind(this, 두 번째 인자)를 주게 되면 두 번째 인자로 들어온 값을 function( )에 첫 번째 인자가 된다. function(id, e)

 

class TOC extends Component {
  render() {
    var lists = [];
    var data = this.props.data;
    var i = 0;
    while (i < data.length) {
      lists.push(<li key={data[i].id}>
        <a
          href={"/content/" + data[i].id}
          data-id={data[i].id}
          onClick={function (id,e) {
            e.preventDefault();
            this.props.onChangePage(id);
          }.bind(this, data[i].id)}
        >{data[i].title}</a></li>);
      i = i + 1;
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    )
  }
}