[생활코딩 React] 4. 이벤트

① 이벤트 state props 그리고 render 함수

//App.js

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(){ //어떤 html을 그릴것인가 결정
    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;
    }
    return (
      <div className="App">
        <Subject title = {this.state.subject.title} 
        sub = {this.state.subject.sub}></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title = {_title} desc ={_desc}></Content>
      </div>
    );
  }
}

export default App;

② 이벤트 설치

//App.js

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}>
        </Subject> */}
        <header>
          <h1><a href="/" onClick={function () {
          //JavaScript와는 다르게 react에서는 onclick -> onClick 사용
          }}>{this.state.Subject.title}</a></h1>
          {this.state.Subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }

③ 이벤트에서 state 변경하기(setState 함수)

//App.js

return (
      <div className="App">
        {/* <Subject
          title={this.state.Subject.title}
          sub={this.state.Subject.sub}>
        </Subject> */}
        <header>
          <h1><a href="/" onClick={function (e) {
            e.preventDefault(); 
              mode: 'read'
            });
          }.bind(this)}>{this.state.Subject.title}</a></h1>
          {this.state.Subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );

④ 이벤트 bind 함수 이해하기

var obj = {name:'egoing'};
 -> undefined
 
function bindTest(){
    console.log(this.name);
}
 -> undefined
 
bindTest.bind(obj);
 -> ƒ bindTest(){
        console.log(this.name);
    }
    
var bindTest2 = bindTest.bind(obj);
 -> undefined
 
bindTest2();
 -> egoing

⑤ 컴포넌트 이벤트 만들기

  ⑴ 

//App.js

    return (
      <div className="App">
        <Subject title = {this.state.subject.title} 
        sub = {this.state.subject.sub}
        onChangePage={function(){
          this.setState({model:'welcome'})
        }.bind(this)}
        >
        </Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title = {_title} desc ={_desc}></Content>
      </div>
    );
  }
}

//Subject.js

    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>  
      );
    }

 

⑵

//App.js

    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>
    );

//TOC.js

      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;
      }

 

⑶

//App.js

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(){
    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'){
      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 = 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)
          });
        }.bind(this)}
        data={this.state.contents}></TOC>
        <Content title = {_title} desc ={_desc}></Content>
      </div>
    );
  }
}

export default App;

//TOC.js

      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();
                this.props.onChangePage(e.target.dataset.id);
              }.bind(this)}
            >{data[i].title}</a>
          </li>);
        i = i + 1;
      }

 

출처: https://opentutorials.org/module/4058/24740