React기초-2.컴포넌트 제작

컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요.

 

1. 우선 App.js에서 <div className="App"> 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다.

logo.svg파일을 임포트 하는 부분도 삭제해 줍니다.

import React, { Component } from 'react';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
	render(){
        return (
          <div className="App">
            <header> {/*Subjct Component */}
              <h1>WEB</h1>
              world wide web!
            </header>

            <nav>{/*TOC Component */}
              <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>

            <article>{/*Content Component */}
              <h2>HTML</h2>
              HTML is HyperText Markup Language.
            </article>
          </div>
        );
    }
}

export default App;

 결과물은 아래와 같이 나타나게 됩니다.

 

 

 

2. 다음으로 <header>, <nav>, <article> 부분을 이용하여 각각 Subject.js , TOC.js, Content.js component를 만듭니다. component들은 components라는 폴더를 만들고 그 내부에 생성합니다. (빈 편집창에서 rcc라고 치고 엔터를 치면 Class형 component 양식을 자동 구성해줍니다.)

 

 

 

Subject.js

import React, { Component } from 'react';

class Subject extends Component {
    render() {
        return (
            <div>
                <header>
                    <h1>WEB</h1>
                    world wide web!
                </header>
            </div>
        );
    }
}

export default Subject;

TOC.js

import React, { Component } from 'react';

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

export default TOC;

content.js

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div>
                <article>
                    <h2>HTML</h2>
                    HTML is HyperText Markup Language.
                </article>
            </div>
        );
    }
}

export default Content;

3. App.js를 작성한 component를 이용하여 재구성합니다.

  - 각각의 컴포넌트들을 import 해주고

  - 각각의 컴포넌트들을 불러와 사용해준다.

import React from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

function App() {
  return (
    <div className="App">
      <Subject />

      <TOC />

      <Content />
    </div>
  );
}

export default App;

 결과물이 최초 화면과 동일하게 나온다면 컴포넌트가 정상적으로 생성된 것으로 볼 수 있겠네요.

 

- 끝 -