참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다.
React의 실행순서는 Entry Point인 index.js → Root.js → App.js 순이다.
여기서 index.js 안에 바로 App 컴포넌트를 붙이지 않은 이유는 Router와 Redux를 Root.js에서 연동하기 위함이다.
Entry Point인 index.js에 Root 컴포넌트가 렌더링된다고 했을 때, Root.js부터 App.js에 서브 컴포넌트들이 렌더링 되는 과정을 보자.
- Root.js
- Proivder : Redux store를 제공하는 컴포넌트이다. store라는 props에 설정한 store 정보를 전달한다.
- BrowserRouter : Client에서 사용되는 Router이다. App 컴포넌트를 감싸서 Global하게 사용할 수 있게 해준다.
import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import { Provider } from 'react-redux'; import configure from 'store/configure'; const store = configure(); const Root = () => ( <Provider store={store}> <BrowserRouter> <App/> </BrowserRouter> </Provider> ); export default Root;- App.js
- 위 그림에서 보듯이 App.js 내부에는 크게 menu(빨간색) 컴포넌트와 page(파란색) 컴포넌트 부분으로 나눴다.
- 메뉴 클릭을 통해서 해당하는 라우팅에 따라서 페이지 컴포넌트가 붙는다.
import React, { Component } from "react"; import { Route, Switch, Link } from "react-router-dom"; import { RpPage, ... } from "pages"; ... class App extends Component { handleItemClick = (e, { name }) => { ... } render() { const { activeItem } = this.props; return ( <div className='base'> <Segment inverted className='menuWrapper'> <Menu inverted pointing secondary className='menu'> <Menu.Item as={Link} to="/navi" name="Aporia Viewer" active={activeItem === "Aporia Viewer"} onClick={this.handleItemClick} /> ... </Menu> </Segment> <div className='pageWrapper'> <Switch> <Route exact path="/" component={RpPage} /> <Route path="/navi" component={RpPage} /> ... </Switch> </div> </div> ); } } ...- page 컴포넌트 파일 예제(RpPage.js)
- 각 페이지 component 안에 여러 sub component 또는 container를 붙인다.
- 완성된 페이지 component는 index.js에 모듈화되어 쓰인다.
export { default as RpPage } from './RpPage'; export { default as ScenarioPage } from './ScenarioPage'; export { default as ReportPage } from './ReportPage'; export { default as TestcasePage } from './TestcasePage'; export { default as DrivingPage } from './DrivingPage';
import React from 'react'; import { Detail, Map, NodeProperty, RouteProperty } from 'components/Rp'; import PannelLayout from 'containers/Rp/PannelLayout'; const RpPage = () => { return ( <PannelLayout left={<RouteProperty />} center={<Map />} right={<NodeProperty />} bottom={<Detail />} /> ) }; export default RpPage;
