[React] Day 3 - component 파일로 분리하기

각 component를 각각 파일로 분리하는 방법

➡️분리한 파일의 맨 위에는 항상 Component라는 클래스를 로딩해주는 코드를 작성해야 한다.

 

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

import React, { Component } from 'react';

 

➡️component를 분리하기 위해서 만든 파일을 가져왔을때 외부에서 어떤 내용을 사용할 수 있게 할것인지 정해준다.

📌export default 클래스 이름;

ex) export default TOC;

 

➡️각 component들을 불러와서 사용할 js 파일에서 각 component 파일을 가져와서 사용하려면 아래의 코드를 추가해준다.

import 파일 이름 from "파일 경로";

ex) import TOC from "./components/TOC";

 

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;

 

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;

 

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>
        <Subject title="React" sub="For UI"></Subject>
        <TOC></TOC>
        <Content title="WEB" desc="HTML is HyperText Markup Language"></Content>
      </div>
    );
  }
}

export default App;