02. Componet 구성해보기

Component 를 이용하여 페이지를 구성합니다

들어가며

Componet 란 view 를 구성하는 작은 조각들을 의미합니다. 아래의 Layout 은 크게 Header, Menu, Body 의 커다란 Component 로 구성됩니다.

초기 프로젝트 구성

CRA 가 만들어주는 기본 구조에서 약간의 변경이 필요합니다. 당장 불필요한 요소들을 제거합니다.

앞으로의 모든 예제는 아래와 같은 상태로 시작됩니다.

// App.css 모든 내용을 제거해주세요

// App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      Hello 
    </div>
  );
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

실습

Component 조각들 (Header, Body, Footer) 을 추가하기 위해 Component 들을 모아둘 폴더를 생성합니다. src 폴더 아래 components 라는 폴더를 추가하고 Component 파일들을 만들어줍니다.

// components/header.js

import React from 'react';

function Header() {
  return (
    <div className="wrap_header">
      Header
    </div>
  );
}

export default Header;

// components/body.js

import React from 'react';

function Body() {
  return (
    <div className="wrap_body">
        Body
    </div>
  );
}

export default Body;

// components/footer.js

import React from 'react';

function Footer() {
  return (
    <div className="wrap_footer">
      Footer
    </div>
  );
}

export default Footer;

위의 컴포넌트들의 내용을 보면 아래와 같이 HTML 스러운 코드가 있음을 볼 수 있습니다. 하지만 이는 HTML 이 아니라 JSX 라 불리는 React 에서 Component 를 구성하기 위해 사용되어지는 문법입니다. 일반적인 HTML 에서는 class 라는 이름을 사용하지만 JSX 에서는 className 이라는것으로 표현되어집니다. 이처럼 약간의 다른부분들이 존재하지만 일반적으로 사용되는 HTML 과 매우 비슷하여 거부감없이 접근하실 수 있습니다.

<div className="wrap_footer">
  Footer
</div>

위의 Component 들을 추가하고 App.js 에서 Component 조각들을 조립해보겠습니다. export 를 이용하여 Component 들을 각 파일에서 내보내고 사용할 곳에서 import 를 이용하여 Component 들을 가져올 수 있습니다.

// App.js

import React from 'react';
import './App.css';
import Header from './components/header'
import Body from './components/body'
import Footer from './components/footer'

function App() {
  return (
    <div>
      <Header />
      <Body />
      <Footer />
    </div>
  );
}

export default App;

// App.css

.wrap_header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #000;
}

.wrap_body {
  width: 120px;
  height: 100vh;
  float: left;
  border-right: 1px solid #000; 
}

아래와 같은 결과를 보실 수 있습니다. (참고로 style 은 App.js 에서 가져옵니다)

Previous01. React 시작해보기 Next03. styled-component 로 스타일링해보기

Last updated 4 years ago