React 파일 구조

kiko·2021년 7월 22일

React 설치

npm install -g create-react-app

React typescript cli 설치

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

필요한 패키지 설치

Sass (node-sass)

"yarn eject" 명령 후 scripts, config 파일이 생성 된다.
webpac.config.js에서 command line 62번째줄 const "cssRegex = /.(css|scss)$/"로 수정
post-loader밑에 scss를 위한 새로운 loader를 추가

  {
        loader: require.resolve('sass-loader'),
        options: {
          sourceMap: true
        }
      }

yarn start로 다시 작동.

Router (react-router-dom, @types/react-router-dom)

root 파일 (경로 index.tsx) 파일에 BrowswerRouter, Route 설정.

BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터.

Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링

import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
      <Route
        path="/"
        component={App}/>
    </BrowserRouter>
  document.getElementById('root')
);

classnames (classnames, @types/classnames)

Mobx (mobx, mobx-react)

root 파일에 (경로 index.tsx) 파일에 Provider 설정

import { Provider } from 'mobx-react';

const stores = new RootStore();

ReactDOM.render(
  <Provider {...stores}>
    <BrowserRouter>
      <Route
        path="/"
        component={App}/>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

axiox (axios)

query-string (query-string)

helmet (@types/react-helmet, react-helmet)

loadable (@loadable/component, @types/loadable__component)

cli 패키지 설정

// 운영
yarn add react-router-dom @types/react-router-dom classnames @types/classnames axios mobx mobx-react @loadable/component @types/loadable__component react-helmet @types/react-helmet
query-string 

// 개발 
yarn add node-sass@4.14.1 sass-loader@7.3.1 --dev

폴더 구조

기본 폴더 생성

mkdir components config images interfaces lib shared stores

// components
cd components mkdir common touch Header.scss Header.tsx Sidebar.scss Sidebar.tsx

// config
cd config mkdir 
touch

차 주