[생활코딩] 이벤트 state props 그리고 render 함수

 

 

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

 

 

state 세팅하기

현재 보고있는 페이지가 welcome page인지 read page인지 구분하기 위해 state에 mode 값을 준다. (기본값은 welcome)

mode:'welcome',

그리고 welcome mode 일 때 content 영역에 표시할 text도 지정한다.

welcome:{title:'Welcome',desc:'Hello, React!!'},

react에서는 state 값이 바뀌면 그 state를 가지고 있는 component 에 render 함수가 다시 호출된다. 그러면 그 render 함수 하위에 있는 여러 component 들의 render 함수들도 다시 호출된다. 결국 화면이 다시 그려진다. 

 

props나 state 값이 바뀌면 해당되는 component의 render 함수가 호출되도록 약속되어 있다. (화면이 다시 그려진다)

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:'welcome',
      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(){
    return(
      <div className="App">
      <Subject 
        title={this.state.subject.title} 
        sub={this.state.subject.sub}>
      </Subject>
      <Subject title="React" sub="For UI"></Subject>
      <TOC data={this.state.contents}></TOC>
      <Content title="HTML" desc="HTML is HyperText Markup language."></Content>
    </div>
    );
  }
}

export default App;

 

mode 값에 따라서 만들어지는 rendering 결과가 달라지도록 조건문을 사용한다.

 

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;
    }
    return(
      <div className="App">
      <Subject 
        title={this.state.subject.title} 
        sub={this.state.subject.sub}>
      </Subject>
      <Subject title="React" sub="For UI"></Subject>
      <TOC data={this.state.contents}></TOC>
      <Content title={_title} desc={_desc}></Content>
    </div>
    );
  }

}

export default App;