React.js Component Module

React.js Component 생성 및 모듈화

React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠다.

Component 생성 및 모듈화

다음 index.js 파일은, 이전 포스트에서 만든걸 이어서 진행한다.

src/index.js

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

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

먼저, React 어플리케이션 의 기반이 될 App.js 파일을 수정한다.

src/components/App.js

import React from 'react';

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

export default App;

컴포넌트를 만들때는 React.Component 클래스를 상속하여 만든다.
7-8 에있는 <Header/> 와 <Content/> 는 앞으로 우리가 만들 컴포넌트 이다.

한 파일엔 여러개의 컴포넌트가 존재 할 수 있다.

그럼, App.js 파일을 업데이트 해보도록 한다.

src/components/App.js [+1]

import React from 'react';

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

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

class Content extends React.Component {
    render() {
        return (
            <div>
                <h2>Content</h2>
                <p> Hey! </p>
            </div>
        );
    }
}

export default App;

이렇게 여러 class를 포함시켜 작성 할 수 있지만, 어플리케이션의 규모가 커지면 유지/보수가 불편해질 것이다.

Component들을 모듈화 하여 여러 파일로 분리해서 사용하면 유지 보수가 훨씬 쉬워진다. 이 개념은 Node.js 의 모듈화와 동일하다.

---

Header.js 파일을 생성하고, App.js의 15~21 줄을 잘라내서 삽입한다.

src/components/Header.js

import React from 'react';
 

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

export default Header;

모듈에서도 react 를 import 해주어야 한다.

이 키워드에 대한 자세한 정보는 Mozilla 참고자료 에서 확인 할 수 있다.

---

이제 Content 컴포넌트를 모듈화 해보도록 하겠다. 과정은 위와 같으니 설명은 생략한다.

src/components/Content.js

import React from 'react';

class Content extends React.Component {
    render() {
        return (
            <div>
                <h2>Content</h2>
                <p> Hey! </p>
            </div>
        );
    }
}

export default Content;

모듈들을 export 했으니 App.js 에서 import 도 해야 될 것이다. App.js 를 다음과 같이 업데이트 한다.

src/components/App.js [+2]

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;

3~4번에 있는 import 를 통하여 해당 모듈들을 App.js 에서 사용한다.

출력물

참조

• https://velopert.com/900