[생활코딩] 컴포넌트 이벤트 만들기1

 

 

생활코딩 https://www.youtube.com/watch?v=NFR7vDArVlY&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=24

 

Subject Component 에 이벤트를 설치하고 싶다면 onChangePage 이벤트를 사용하여 onChangePage 이벤트에 설치한 함수를 호출하도록 만들면 된다.

 

 

 

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 HyperText ...'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }
  render(){
    console.log('App 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;
    }
    console.log('render',this);
    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.contents}></TOC>
      <Content title={_title} desc={_desc}></Content>
    </div>
    );
  }
}

export default App;

 

 

 

Subject Component는 페이지가 바뀌었을 때 componenet 사용자가 설치한 함수를 호출해주기만 하면 되는데,

onChangePage 는 props 형태로 Subject에 전달된다.

 

 

import React,{Component} from 'react';

class Subject extends Component{
    render(){
      console.log('subject 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;