[React] Component 파일로 분리하기

1. src/components 디렉토리를 생성하고, 컴포넌트들을 담을 각 파일을 생성

//Subject.js
import React, {Component} from 'react';

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

export default Subject;   //Subject 컴포넌트를 외부에서 사용할 수 있게 허용

//TOC.js
import React, {Component} from 'react';

class TOC extends Component{
    render(){
      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>
            </ul>
        </nav> 
      );
    }
  }

export default TOC;

//Content.js
import React, {Component} from 'react';

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

export default Content;

 

2. App.js 파일 수정하기

import React, {Component} from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
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 Markup Language."></Content>
      </div>
    );
  }
}
export default App;