리액트 초기 폴더 구조 및 Router 설정 :: react-router-dom, BrowerRouter

폴더 구조 

저는 폴더 전체 구조를 잡을 때 apis, assets, pages, components, styles 폴더로 나누고, 그 안에 index.js 파일로 관리합니다. 

 

pages 폴더에는 말 그래도 웹에 띄우는 페이지 단위가 들어갑니다. 

components 폴더에는 페이지 안에 컴포넌트로 구성될 요소들이 들어갑니다. 컴포넌트로 따로 빼놓으면 여러 페이지에서 해당 컴포넌트를 재사용할 수 있기 때문에 분리시키는 게 좋습니다.

assets 폴더에는 image, video, font 등을 저장합니다.

apis 폴더에는 서버와의 통신에 필요한 get, post, put, delete api 구조의 틀을 잡아놓고 사용합니다.

styles 폴더에는 css 파일들을 관리합니다.

 

얼마 전 IT 연합 학회에서 게시판 고도화 프로젝트를 했었는데, 그때 구축한 폴더 구조는 아래와 같습니다.

│  App.css
│  App.js
│  App.test.js
│  index.css
│  index.js
│  logo.svg
│  reportWebVitals.js
│  setupTests.js
│
├─api
│      cookie.js
│      deleteApi.js
│      getApi.js
│      index.js
│      postApi.js
│      putApi.js
│
├─assets
│  └─images
│          Logo.svg
│          search.png
│          search.svg
│
├─components
│      Editor.js
│      index.js
│      LoginForm.js
│      SearchBar.js
│      SignupForm.js
│
├─pages
│      Board.js
│      Home.js
│      index.js
│      Login.js
│      Logout.js
│      NotFound.js
│      PostDetail.js
│      PostModify.js
│      PostWrite.js
│      Signup.js
│
└─styles
        Board.css
        Login.css
        PostDetail.css
        Write.css

각 폴더마다 존재하는 index.js 파일에는 해당 폴더마다 export 하는 컴포넌트를 관리합니다.

예를 들어 상단의 components/index.js 의 내용은 다음과 같이 components 폴더 내의 파일들의 export를 관리합니다.

export { default as SignupForm } from "./SignupForm";
export { default as LoginForm } from "./LoginForm";
export { default as Editor } from "./Editor";
export { default as SearchBar } from "./SearchBar";

 

그러면 다른 페이지에서 해당 컴포넌트를 사용하려고 import 할 때, 아래와 같이 import 합니다.

import { LoginForm } from '../components';

 

 

 

App.js 에서 라우팅 설정

폴더들을 구성한 뒤, 최상단의 App.js에서 해당 페이지들과 path를 매핑시켜 라우팅 설정을 해줍니다.

npm install react-router-dom

<div className="App">
    <Routes>
        <Route path="/" exact={true} element={<Home />} />
        <Route path='/login' element={<Login />} />
        <Route path='/signup' element={<Signup />} />
        <Route path='/postdetail' element={<PostDetail />} />
        <Route path='/postlist' element={<PostList />} />
        <Route path='/write' element={<PostWrite />} />
        <Route path='*' element={<NotFound />} />
    </Routes>
</div>

 

 

** App.js 까지 할거 다 했는데 왜 안되지? 했을 때 이 코드를 추가하세요.

src 폴더 아래의 index.js 에 BrowerRouter를 import 하고,

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

<APP /> 를 <BrowserRouter> 태그로 감싸줍니다. 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();