코드_이고잉_리액트

아래의 페이지를 만드는 것이다.
subject, TOD, Article 섹션으로 나누어서 작업했다.
TOD각각을 누르면, 맨 아래 Article의 title,과 desc가 바뀐다.

핵심이라면 핵심!!

값을 정할때는 this.state={}로 하고
값을 바꿀때는 this.setState({}) 이렇게 바꾸어갔다.

App.js

import React,{Component} from 'react'
import './App.css';
import Subject from './components/Subject'
import Article from './components/Article'
import TOD from './components/TOD'




class App extends Component{

  constructor(props){
super(props);
this.state ={
  selected_contents_id:2,
  mode:'read',
  welcome:{title:'반갑습니다.',desc:'와아아아아'},
  subject:{
    title:'미현이의 홈!!',
    sub:'환영합니다'
  },
  contents:[{
id:1,
title:'미현이의 음식',
desc:'샤부샤부, 따뜻한 국물, 딸기모찌모찌'
  },
{
  id:2,
  title:'미현이의 장소d',
  desc:'부산 해운대'
  
},
{
  id:3,
  title:'미현이의 책',
  desc:'칙센트 미하이 칙센트'
  
}]
}
  }

  render(){
    let _title, _desc =null;
    if(this.state.mode ==='welcome'){
      _title =this.state.welcome.title
      _desc =this.state.welcome.desc
    }else if(this.state.mode ==='read'){
      let i=0;
      while(i<this.state.contents.length){
        if(this.state.selected_contents_id ===this.state.contents[i].id){
        _title = this.state.contents[i].title
        _desc =this.state.contents[i].desc
        break;
        }
        i=i+1
      }
      // _title =this.state.contents[0].title
      // _desc =this.state.contents[0].desc
    }
  return (
   <div>

  <Subject onChangePage={function(){  this.setState({
    mode:'welcome'
  })}.bind(this) }
  title={this.state.subject.title} 
  sub={this.state.subject.sub}/>
<TOD data={this.state.contents}
onChangePage={function(id){ this.setState({
  mode:'read',
selected_contents_id:Number(id)
}); }.bind(this)}/>
<Article  title={_title} desc={_desc}/>
     
   </div>
  );
}
}
export default App;

Subject.js

import React,{Component} from 'react'

class Subject extends Component{
    render(){
      return(
        <div>
          <header>
       <h1><a onClick={function(e){
         e.preventDefault();
         this.props.onChangePage();
       }.bind(this)} href="/">{this.props.title}</a> </h1>
      {this.props.sub}
       </header>
        </div>
      )
    }
  }

  export default Subject

TOD.js

import React, { Component } from 'react'

class TOD extends Component {
    render() {
        let list=[]
        let data = this.props.data;
        let i = 0;
        while (i < data.length){
            
           list.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
        }

            return (<div>

                <nav>
                    <ul>
{list}
                    </ul>
                </nav>
            </div>)
    }
}

export default TOD

Article.js

import React,{Component} from 'react'

class Article extends Component{
    render(){
  
      return(<div>
  <article>
    <h2>{this.props.title}
  {/* 미현이의 음식 */}
    </h2>{this.props.desc}
  {/* 샤부샤부, 따뜻한 국물, 딸기모찌모찌 */}
  </article>
      </div>)
    }
  }

  export default Article