2021.02.09 / React - render

생활코딩 16.1강 - 이벤트 state props 그리고 render 함수

 

render 함수를 통해 모드 변경

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode:'read',
      welcome:{title:'welcome', desc:'Hello, React!!'},
      subject:{title:'WEB', sub:'World wide web!'},
      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}>
          </Subject>
          <TOC data={this.state.contents}></TOC>
          <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

 

 

참고

- www.youtube.com/watch?v=kviidk347nU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=19