[React] (4) Component 만들기

  이번 포스팅에서는 Component를 제작하는 것을 설명할 것이다. 지난번 포스팅에서 App이라는 component를 제작했는데 이번엔 다양한 Component를 만들고 src/components에 넣어 사용하는 방법과 props라는 것에 대해서도 알아볼 것이다.

 

우선, src폴더에 components라는 폴더를 생성한다. 그리고 아래와 같이 세 가지의 파일을 만들고 코드를 넣는다.

 

/src/components (새로 생성한 폴더)

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

 

 

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

 

---

 

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="HTML" desc="HTML is HyperText Markup Language."></Content>
    </div>
    );
  }
}

export default App;

 

 

  위에 세 가지 파일을 import 시켜서 가져온 다음 각 Component에 title이나 sub을 주고 this.props.title이나 this.props.sub으로 가져올 수 가있다. 이런 식으로 코드를 짜게 된다면 Component를 폴더에 나눠서 쓰고 싶은 부분만 쓸 수 있고  props로 해당부분의 내용도 바꿀 수 있기 때문에 좋다.