이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 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 에서 사용합니다.
출력물
마무리하며..
이 강좌에서 사용된 코드는 GitHub 에서 확인 할 수 있습니다. 다음 강좌에서는 이 프로젝트를 이어서 state 와 props 개념에 대하여 알아보겠습니다.