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

컴포넌트 이벤트 만들기

📢페이지가 변경되었을때 이벤트를 실행시키는 이벤트 만들기

 

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!!' },
      contents: [
        { id: 1, title: 'HTML', desc: 'HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS is for design' },
        { id: 3, title: 'Javascript', desc: 'Javascript is for interactive' }
      ]
    }
  }
  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.contents[0].title;
      _desc = this.state.contents[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
          onChangePage={function () {
            this.setState({ mode: 'read' });
          }.bind(this)}
          data={this.state.contents}
        ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

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

export default Subject;

TOC.js

import React, { Component } from 'react';

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}
          onClick={function(e){
              e.preventDefault();
              this.props.onChangePage();
            }.bind(this)}
          >{data[i].title}</a>
        </li>);
      i = i + 1;
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    );
  }
}

export default TOC;

 

➡️a태그가 클릭될 시 App.js에서 만든 onChangePage함수를 this.props를 이용해서 실행시켜주기.

 

📢페이지가 변경되었을때 HTML, CSS, Javascript 총 세개의 a 태그 중 클릭을 하면 그에 대한 title과 desc가 뜨는 이벤트 만들기

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: 'Javascript', desc: 'Javascript is for interactive' }
      ]
    }
  }
  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 now_data = this.state.contents[i];
        if (now_data.id === this.state.selected_content_id) {
          _title = now_data.title;
          _desc = now_data.desc;
        }
        i = 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)
              // TOC.js에서 받아온 id 값을 설정해줌으로써 선택된 a 태그의 정보가 출력됨.
            });
          }.bind(this)}
          data={this.state.contents}
        ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

 

TOC.js

import React, { Component } from 'react';

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}  // 현재 데이터의 id 값을 data-id에 넣어준다. 
          onClick={function(e){
              // e.target 
              // 여기서 target는 이벤트가 발생한 태그를 말한다. 따라서 여기서는 클릭된 a 태그를 뜻한다.
              // e.target.dataset.id
              // target를 통해서 dataset에 들어있는 id값에 접근 할 수 있다.
              e.preventDefault();
              this.props.onChangePage(e.target.dataset.id);
            }.bind(this)}
          >{data[i].title}</a>
        </li>);
      i = i + 1;
    }
    return (
      <nav>
        <ul>
          {lists}
        </ul>
      </nav>
    );
  }
}

export default TOC;