React Props State 동작원리

App.js

import './App.css';
import React, {Component} from 'react';
import Event from './Event';
import MySubject from './MySubject';
import MyContent from './MyContent';
import MyTopic from './MyTopic';

//JSX



class App extends Component{

  constructor(props){
    super(props);
    this.state = {
      mode : 'welcome',
      welcome : {title: 'welcome', desc : '반갑슴다.'},
      subject : {title: 'WEB', sub : 'World Wide Web'},
      contents : [
        {id: 1, title : 'HTML', desc: 'HTML is .....'},
        {id: 2, title : 'CSS', desc: 'CSS is .....'},
        {id: 3, title : 'JS', desc: 'JS is .....'},
      ]
    };
      
  }


  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 === 'seleted') {
      _title  = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
      return (
    <div className="App">
      <MySubject title = {this.state.subject.title} sub = {this.state.subject.sub}></MySubject>
      <MyTopic data = {this.state.contents}></MyTopic>
      <MyContent title = {_title} desc = {_desc}></MyContent>
    </div>
  );
  }
}

export default App;

 

MySubject.js

import React, {Component} from 'react';

class MySubject extends Component{
    render(){
    //console.log(this.props)
    console.log('MySubject render');
    return (
      <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
      </header>
    );
    }
  }


export default MySubject;

 

 

MyTopic.js

import React, {Component} from 'react';

class MyTopic extends Component{
    render(){
    //console.log(this.props);
    console.log('MyTopic render');
    var lists = [];
    var data = this.props.data;
    var i = 0;
    while(i < data.length){
      lists.push(<li key = {data[i].id}><a href={data[i].id}>{data[i].title}</a></li>)
      i = i+1;
    }
        return(
          <nav>
          <ul>
              {/* <li><a href="1.html">HTML</a></li>
              <li><a href="2.html">CSS</a></li>
              <li><a href="3.html">javascript</a></li> */}
              {lists}
          </ul>
      </nav>
        );
      }
  }



export default MyTopic;

 

MyContent.js

import React, {Component} from 'react';

class MyContent extends Component{
    render(){
    //console.log(this.props)
    console.log('MyContent render');
        return(
          <article>
          <h2>{this.props.title}</h2>
          {this.props.desc}
        </article>
        );
      }
  }



export default MyContent;

초기페이지 

css를 클릭할 경우

js를 클릭할 경우