[생활코딩] 리액트 스터디 #5 이벤트(2)

전편에서 다룬 onClick 함수는 내장 함수지만 사용자 함수도 정의할 수 있다.

이번 강의에서는 사용자가 만든 Component 안에서 사용자 함수를 정의해서 여러 가지 event를 만들어볼 것이다.

 

1. onChangePage 함수

 

//App Component에서의 Subject 태그

<Subject 
        title={this.state.subject.title} 
        sub={this.state.subject.sub}
        onChangePage={function(){
          this.setState({mode:'welcome'})  //직접 만든 event
        }.bind(this)}
      >
</Subject>

여기서 onChangePage는 사용자가 직접 만든 함수이다.

 

 

//Subject.js

import React, {Component} from 'react';
 
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;

 

onClick 함수가 실행되었을 때 onChangePage가 호출되면서 mode를 'welcome'으로 바꿔준다.

이전에(#3 State 편) mode가 'welcome'이 되면 title과 desc를 바꿔주도록 했으므로 'WEB'을 클릭하면 welcome page가 뜬다.

 

이번에는 3개의 contents(HTML, CSS, JavaScript)중 클릭한 항목의 내용이 본문에 나오도록 해볼것이다.

 

우선 render 함수에서 mode가 'read'일 때 selected_content_id값을 받아와서 그 id값에 대응되는 title과 desc가 보여지게끔 한다.

 

//App.js의 render 함수

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'){
      var i=0;
      while(i<this.state.contents.length){
        var data=this.state.contents[i];
        if (data.id===this.state.selected_content_id){
          _title=data.title;
          _desc=data.desc;
        }
        i=i+1;
      }
      
    }

//App Component의 TOC 태그

 <TOC onChangePage={function(id){
        this.setState({mode:'read', selected_content_id:Number(id)});
      }.bind(this)}
        data={this.state.contents}></TOC>

<li><a href={"/content/"+data[i].id}
             data-id={data[i].id}
             onClick={function(e){
               e.preventDefault();
               this.props.onChangePage(e.target.dataset.id);
             }.bind(this)}>
             {data[i].title}</a>
        </li>