[Following Opentutorials] React 15 props and state

https://www.youtube.com/watch?v=rOpg2KUPW2M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=16

1. Overview

State  - an element for implementing a component from the inside (internal development syntax that developers manipulate when building internals)
Props - an element for using a component from the outside (the interface the user uses to consume the component)

• State can be changed (Mutable)
• Whereas Props can't (Immutable)

2. First goal of this lesson

Hide the attribute values currently exposed below. 

<Subject title="WEB" sub="world wide web !"></Subject>

1) app.js (before)

import React, {Component} from 'react';
import './App.css';

//분리된 컴포넌트들 import 
import Subject from "./component/Subject"
import TOC from "./component/TOC"
import Content from "./component/Content"

//*컴포넌트들이 '들어가는(나열되는)' 영역
class App extends Component{
  render(){
    return (
      <div className="App">
         <Subject title="WEB" sub="world wide web !"></Subject>
         <TOC></TOC>
         <Content title="HTML" desc="HTML is HyperText "></Content>
      </div>
    );
  }
}

export default App;

2) app.js (after)

import React, {Component} from 'react';
import './App.css';

//분리된 컴포넌트들 import 
import Subject from "./component/Subject"
import TOC from "./component/TOC"
import Content from "./component/Content"

//*컴포넌트들이 '들어가는(나열되는)' 영역
class App extends Component{

  //** 컴포넌트가 실행될때, render 보다 먼저 '초기화'하기 위해 선언 
  constructor(props){ 
    super(props); 
    
    //** 이 안에 초기화할 컴포넌트 요소들을 넣는다.
    this.state={
      subject:{title:'WEB', sub:'world wide web !'}
    }
  }

  render(){
    return (
      <div className="App">
         <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
         <TOC></TOC>
         <Content title="HTML" desc="HTML is HyperText "></Content>
      </div>
    );
  }
}

export default App;

An upper-level state value                              <--  this.state={ ... }
can be used as a child's props value.  <--  {this.state.subject.title}

The output is identical to the earlier code, but the props values are fetched only through the state inside the constructor. Information that the outside world doesn't need to know is thoroughly hidden. 

2. Separating the TOC 

Specify the initial values of props on the upper-level state                            <-- this.state = { contents[{...},{...},{...} ] }
Declare the upper-level state as a variable inside TOC.js through child props,         <-- data = { this.state.contents }
and use it as another props element                                                <-- var data = this.props.data

1) app.js

import React, {Component} from 'react';
import './App.css';

//분리된 컴포넌트들 import 
import Subject from "./component/Subject"
import TOC from "./component/TOC"
import Content from "./component/Content"

//*컴포넌트들이 '들어가는(나열되는)' 영역
class App extends Component{
  constructor(props){ //컴포넌트가 실행될때, render 보다 먼저 '초기화'하기 위해 선언, 그안에 초기화할 요소들을 넣는다.
    super(props); 
    this.state={
      subject:{title:'WEB', sub:'world wide web !'},
      content:[
        {id:1, title:"HTML", desc:"HTML is HyperText "},
        {id:2, title:"CSS", desc:"Css is for design "},
        {id:3, title:"JS", desc:"javascript is for intrective "}
      ]
    }
  }

  render(){
    return (
      <div className="App">
         <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
         <TOC data={this.state.content}></TOC>
         <Content title="HTML" desc="HTML is HyperText "></Content>
      </div>
    );
  }
}

export default App;

2) TOC.js

import React, {Component} from 'react';  //<-- Component class를 로딩하기위해 

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class TOC extends Component{
    //class 안에서는 function을 생략할 수 있다.
    render(){
      var lists=[];
      var data = this.props.data;
      var i=0;
      while(i<data.length){
        lists.push(<li ><a href={"/content/"+data[i].id}> {data[i].title}</a></li>);
        i = i+1;
      }
      return(
        <nav>
          <ul>
            {lists}
          </ul>
        </nav>
      );
    }
  }

  export default TOC; // 외부에서 TOC 안에 있는 요소들을 가져다 쓸 수 있도록 해줌 

3) Fixing an error

Error | Each child in a list should have a unique "key" prop.   <-- info React is requesting because it needs it 

Add the key={data[i].id} element to li

while(i<data.length){
  lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}> {data[i].title}</a></li>);
  i = i+1;
 }