[React.JS] 강좌 4편 Component 생성 및 모듈화


이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]

liste

이번 강좌에서는 React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠습니다. 이 강좌는 이전에 설정한 React.js 작업환경에서부터 진행됩니다.

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 에서 사용합니다.

출력물

이미지 1

마무리하며..

이 강좌에서 사용된 코드는 GitHub 에서 확인 할 수 있습니다. 다음 강좌에서는 이 프로젝트를 이어서 state 와 props 개념에 대하여 알아보겠습니다.

liste

  • Nayak

    좋은 강의 감사합니다!

  • 서재민

    안녕하세요.
    열심히 강좌를 하나하나 따라하고 있는데요.
    이번강좌에서 궁금한 점이 있어 글남깁니다.

    처음에 Header, Content클래스를 App.js에 작성할땐 React-dom을 import 시키지 않았었는데
    모듈화를 통해 Header, Content를 분리하고 App.js에서 import시킬때 React-dom이 추가로 import되어 있네요.. index.js에서 React-dom을 불러오는데 모듈화할때 App.js에서도 추가를 해줘야하나요?

  • David Jo

    안녕하세요. 잘 보고 있습니다. ㅎㅎ
    궁금한게 있어서요’ㅎ
    hot loader의 경우 app.js index.js에서 저장을하면 작동을 잘하고 있는데,
    모듈화 하여 component에 넣고 불러오면 그리고 그 하위 모듈에서 save하면 hot loaderr가 작동을 안합니다. 원래 그런 건가요??

    가령..
    App.js에서

    이렇다고 하면 body2.js 에서 저장을 하면 작동을 안하는 것 같아요 맞나요?이게??ㅠㅠ

  • 이하영

    안녕하세요! 정말 좋은 강의 열심히 보고있습니다! 그런데 import React, { Component } from ‘react’; 에서 {Component}의 역할을 잘모르겠습니다. import React만으로도 될것같다고 생각했는데 {Component}의 역할은 무엇인지 알려주신다면 정말 감사하겠습니다ㅜㅠ

    • Wonkun Kim

      Component 는 모든 리액트 요소의 베이스가 되는 클래스 입니다. 따라서 생성하려는 요소는 Component 클래스를 상속하는 것이지요. import React, {Component} from ‘react’;는 다음과 같습니다.
      import React from ‘react’;
      const Component = React.Component;

      요소를 선언할 때 extends React.Component 대신에 extends Component로 쓸 수 있게 해줍니다.

  • Hanjoong Cho

    포크뜨고 드릴 수 있는건 별 한개 뿐이네요.