React Component 구조

React는 UI(혹은 View)를 여러 컴포넌트(Component) 쪼개서 만듭니다.

한 페이지 안에서도 Header, Footer 등 각 부분을 독립된 컴포넌트(Component)로 만들고, 컴포넌트들을 재조립해 화면을 구성합니다.

컴포넌트 기반이라는 점은 React의 아주 큰 장점입니다.

여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 임포트해 사용하면 됩니다.

또한, 기능단위, UI단위로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이합니다.

import React, { Component } from "react";
import Header from "./component/Header";
import Footer from "./component/Footer";
import PostList from "./component/Contents";

class App extends Component {
  render() {
    return(
      <div>
        <Header />
        <Contents />
        <Footer />
      </div>
    )
  }
}

export default App;

위와 같이 Header나 Footer Contents 등은 컴포넌트로 만들고, 이를 재조립해서 루트 컴포넌트를 만드는 구조입니다.