[React] 컴포넌트 이벤트 만들기

이벤트의 생산자가 되어보자.

[Subject 컴포넌트]

 - 제목(WEB)을 클릭하면 mode가 welcome이 된다.

//App.js
import React, {Component} from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import './App.css';

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      mode:'read',
      Subject:{title:'WEB', sub:"World Wide Web!"},
      welcome:{title:"Welcome", desc:"Hello, React!"},
      Content:[
        {id:1, title:'HTML', desc:"HTML is for information"},
        {id:2, title:'CSS', desc:"CSS is for design"},
        {id:3, title:'JS', desc:"JS is for interfactive"}
      ]
    }
  }

  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"){
      _title = this.state.Content[0].title;
      _desc = this.state.Content[0].desc;
    }

    return(
      <div className = "App">
      <Subject
          title={this.state.Subject.title}
          sub={this.state.Subject.sub}
          onChangePage={function(){	 //이벤트 설치: 컴포넌트 안에서 링크를 클릭했을 때, 이 이벤트에 설치한 함수를 호출하도록 만든다.
            this.setState({mode:'welcome'});
          }.bind(this)}
      >
      </Subject>
        <TOC data={this.state.Content}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}
export default App;

//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();
          }.bind(this)}>{this.props.title}</a></h1>
          {this.props.sub}
        </header>
      );
    }
  }

  export default Subject;

 

[TOC 컴포넌트]

 - 목차를 선택하면, 각 목차에 맞는 제목과 내용이 나타난다.

 - id(각각 1, 2, 3)로 조정한다.

//App.js
import React, {Component} from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import './App.css';

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      mode:'read',
      selected_content_id:2,
      subject:{title:'WEB', sub:"World Wide Web!"},
      welcome:{title:"Welcome", desc:"Hello, React!"},
      contents:[
        {id:1, title:'HTML', desc:"HTML is for information"},
        {id:2, title:'CSS', desc:"CSS is for design"},
        {id:3, title:'JS', desc:"JS is for interfactive"}
      ]
    }
  }

  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;
          break;
        }
        i += 1;
      }
    }

    return(
      <div className="App">
      <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:"welcome"});
          }.bind(this)}
      >
      </Subject>
      <TOC 
        onChangePage={function(id){
          this.setState({
            mode:'read',
            selected_content_id:Number(id)  //문자열이었던 id를 숫자로 바꾼다.
          });
        }.bind(this)}
        data={this.state.contents}
      ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}
export default App;

1. 속성을 이용하는 방법

//TOC.js
import React, {Component} from 'react';

class TOC extends Component{
    render(){
      var list = [];
      var data = this.props.data;
      var i = 0;
      while(i < data.length){
        list.push(
        <li key={data[i].id}>
          <a
            href={"/content/" + data[i].id}
            data-id={data[i].id}	//event 객체는 target 속성이 있고, target은 event가 발생한 태그(a태그)를 가리킨다. 따라서 event 함수 내의 e.target은 a태그를 가리킨다.
            onClick={function(e){
              e.preventDefault();
              this.props.onChangePage(e.target.dataset.id);
            }.bind(this)}
          >{data[i].title}</a>
        </li>);
        i += 1;
      }
      return(
        <nav>
            <ul>
                {list}
            </ul>
        </nav> 
      );
    }
  }

  export default TOC;

2. bind를 이용하는 방법

//TOC.js
import React, {Component} from 'react';

class TOC extends Component{
    render(){
      var list = [];
      var data = this.props.data;
      var i = 0;
      while(i < data.length){
        list.push(
        <li key={data[i].id}>
          <a
            href={"/content/" + data[i].id}
            onClick={function(id, e){
              e.preventDefault();
              this.props.onChangePage(id);
            }.bind(this, data[i].id)} //두 번째 인자를 function 함수의 첫 번째 매개변수의 값으로 넣는다. 기존의 것은 뒤로 한 칸씩 밀린다.
          >{data[i].title}</a>
        </li>);
        i += 1;
      }
      return(
        <nav>
            <ul>
                {list}
            </ul>
        </nav> 
      );
    }
  }

  export default TOC;