잇스쿨

[React] 컴포넌트 만들기 본문

프론트엔드/React

[React] 컴포넌트 만들기

잇님 2020. 3. 5. 18:10

샘플 코드

<html>
<body>
    <header>
        <h1>want-itscool</h1>
        Hello~ Frontend World
    </header>
    <nav>
        <ul>
            <li><a href="subject1.html">HTML</a></li>
            <li><a href="subject2.html">CSS</a></li>
            <li><a href="subject3.html">JavaScript</a></li>
        </ul>
    </nav>
    <article>
        <h2>Subject1</h2>
        HTML is HyperText Markup Language.
    </article>
</body>
</html>

 

React를 왜 쓰는지 이해하기 위해서는 우선 public/index.html에 위의 샘플 코드가 있다고 가정하여 설명할 수 있습니다.

시맨틱 마크업에 대해서 알고 있다면 위의 소스 코드가 어떤 구조로 만들어져 있는지 쉽게 이해할 수 있습니다.

이제 위의 코드를 컴포넌트화하여 React를 왜 사용하는지를 알아보겠습니다.

 

 

 

App.js

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

class Header extends Component {
    render() {
      return(
        <header>
            <h1>want-itscool</h1>
        	Hello~ Frontend World
        </header>
      );
    }
}

class Nav extends Component {
    render() {
      return(
        <nav>
            <ul>
            	<li><a href="subject1.html">HTML</a></li>
                <li><a href="subject2.html">CSS</a></li>
                <li><a href="subject3.html">JavaScript</a></li>
            </ul>
        </nav>
      );
    }
}

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

class App extends Component {
  render() {
    return(
      <div className="App">
        <Header></Header>
        <Nav></Nav>
        <Article></Article>
      </div>
    );
  }
}

export default App;

 

 

한 파일에는 여러개의 컴포넌트가 존재할 수 있으며, index.html을 컴포넌트화하면 위의 소스 코드와 같습니다.

이렇게 여러 class로 나누어 작성할 수 있지만, 추후 유지보수를 생각한다면 비효율적입니다.

따라서 Component들을 모듈화하여 파일을 분리하여 사용하면 유지보수가 용이해집니다. 이 개념은 node.js의 모듈화 개념과 동일합니다.

 

 

src에 components 폴더를 생성해서 모듈화를 다음과 같이 합니다.

 

 

src/components/Header.js

import React, { Component } from 'react';

class Header extends Component {
    render() {
      return(
        <header>
            <h1>want-itscool</h1>
        	Hello~ Frontend World
        </header>
      );
    }
}

export default Header;

 

 

src/components/Nav.js

import React, { Component } from 'react';

class Nav extends Component {
    render() {
      return(
        <nav>
            <ul>
            	<li><a href="subject1.html">HTML</a></li>
                <li><a href="subject2.html">CSS</a></li>
                <li><a href="subject3.html">JavaScript</a></li>
            </ul>
        </nav>
      );
    }
}


export default Nav;

 

 

 

src/components/Article.js

import React, { Component } from 'react';

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

export default Article;

 

 

export를 했으니 App.js에서 각 Component를 import하여 사용할 수 있도록 App.js 도 수정합니다.

 

 

 

src/App.js

import React, { Component } from 'react';
import Nav from './components/Nav';
import Article from './components/Article';
import Header from './components/Header';
import './App.css';

class App extends Component {
  render() {
    return(
      <div className="App">
        <Header></Header>
        <Nav></Nav>
        <Article></Article>
      </div>
    );
  }
}

export default App;

 

 

 

저작자표시 비영리 변경금지

'프론트엔드 > React' 카테고리의 다른 글

[Redux] Redux 프로젝트 환경 설치  (0) 2020.04.20
[React] props 와 state  (0) 2020.03.05
[React] JSX  (0) 2020.03.05
[React] vscode 로 React Sample Application 실행해보기  (0) 2020.03.05
[React] 환경 구축  (0) 2020.03.05
'프론트엔드/React' Related Articles more