[Following Opentutorials] React 12~14 Deep-Dive on Components

Once you get here, they say you can finally say "I know how to use React." Hang in there!

https://www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13

https://reactjs.org/docs/components-and-props.html

1. Goal

In app.js, we'll make it so we can control per-instance attributes of the same Tag. This gives the effect of refactoring.

2. User-defined attributes 

1) The area we want to customize down to the attributes

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

 The title and sub parts are now written as attributes, just like <a href="">.

2) Applying those user-defined attributes in React

To do that, edit the class area as below (this.props.attribute_name).

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Subject extends Component{
  //class 안에서는 function을 생략할 수 있다.
  render(){
    return(
      <header>  
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

app.js (full)

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

//*컴포넌트들이 '들어가는(나열되는)' 영역
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>
    );
  }
}

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Subject extends Component{
  //class 안에서는 function을 생략할 수 있다.
  render(){
    return(
      <header>  
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class TOC extends Component{
  //class 안에서는 function을 생략할 수 있다.
  render(){
    return(
      <nav>
        <ul>
          <li><a href="1.html"></a> HTML</li>
          <li><a href="2.html"></a> CSS</li>
          <li><a href="3.html"></a> JS</li>
        </ul>
      </nav>
    );
  }
}

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Content extends Component{
  //class 안에서는 function을 생략할 수 있다.
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    );
  }
}
export default App;

3. Debugging tool 

on the chrom

An application that lets you measure your own code's state. Install the plugin in Chrome and a React tab is added to the Developer Tools.

https://reactjs.org/community/debugging-tools.html

4. Splitting up components 

1) Split each component into its own js file

Subject.js

import React, {Component} from 'react';

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Subject extends Component{
    //class 안에서는 function을 생략할 수 있다.
    render(){
      return(
        <header>  
          <h1>{this.props.title}</h1>
          {this.props.sub}
        </header>
      );
    }
  }
  
 export default Subject;

TOC.js

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

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class TOC extends Component{
    //class 안에서는 function을 생략할 수 있다.
    render(){
      return(
        <nav>
          <ul>
            <li><a href="1.html"></a> HTML</li>
            <li><a href="2.html"></a> CSS</li>
            <li><a href="3.html"></a> JS</li>
          </ul>
        </nav>
      );
    }
  }

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

Content.js 

import React, {Component} from 'react';

//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Content extends Component{
    //class 안에서는 function을 생략할 수 있다.
    render(){
      return(
        <article>
          <h2>{this.props.title}</h2>
          {this.props.desc}
        </article>
      );
    }
  }
  export default Content;

2) Importing the separated components 

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{
  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;