[React] Component 생성하고 모듈화하기-떽떽대는 개발공부

2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기

[React] 프로젝트 생성하고 실행하기

 

이전 글에서 프로젝트를 생성했다면 이제 component를 생성하여 프로젝트를 진행할 수 있다.

 

 

 

 

Component 생성 및 모듈화

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

 

먼저, 기존 src 에 있던 App.js를 components 폴더에 있는 App.js 로 변경해주기 위해 index.js 에 import 된 항목을 수정한다.

src/components/App.js

import React from 'react';

class App extends React.Component {
    render(){
        return  (
            <div>App</div>
        );
    }
}

export default App;

 

컴포넌트를 만들때 import 한 react 의 Component 클래스를 상속한다.

App.js 에서 사용할 수 있도록 아래와 같이 <Header>와 <Content> Component를 추가한다.

한 파일 안에 여러개의 컴포넌트를 추가할 수 있다.

 

src/components/Header.js

import React from 'react';
 
class Header extends React.Component {
    render(){
        return (
            <h1>Header</h1>
        );
    }
}

export default Header;

 

src/components/Content.js

import React from 'react';
 
class Content extends React.Component {
    render(){
        return (
            <div>
                <h2>Content</h2>
            </div>
        );
    }
}

export default Content;

 

모듈들을 export 완료 되면 App.js 에서 import로 Component들을 추가할 수 있다.

src/components/App.js 

import React from 'react';
import Header from './Header';
import Content from './Content';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header/>
                <Content/>
            </div>
        );
    }
}

export default App;

 

출력물