[React] App 컴포넌트 마운팅 과정

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ)

---

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

  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;

  • Proivder : Redux store를 제공하는 컴포넌트이다. store라는 props에 설정한 store 정보를 전달한다.
  • BrowserRouter : Client에서 사용되는 Router이다. App 컴포넌트를 감싸서 Global하게 사용할 수 있게 해준다.

• App.js

  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>
      );
    }
  }
  ...

  

  • 위 그림에서 보듯이 App.js 내부에는 크게 menu(빨간색) 컴포넌트와 page(파란색) 컴포넌트 부분으로 나눴다.
  • 메뉴 클릭을 통해서 해당하는 라우팅에 따라서 페이지 컴포넌트가 붙는다.

• page 컴포넌트 파일 예제(RpPage.js)

  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;

  • 각 페이지 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';