[React] SPA Router

• React가 나오기 전 전통적인 방식은 다음 그림과 같다.
• url이라고 불리는 단위를 바탕으로 해당 페이지의 html, css, js를 서버에게 url에 해당하는 html을 받아왔다.

• React로 넘어오면서 url을 받아오는 것이 아니고, 큰 앱 전체를 받아왔다.
• 각각의 페이지를 요청하는 것이 아닌 전체(Single Page Application)을 받아오는 방식을 사용하기 시작했다.

---

SPA의 라우팅 과정

1. 브라우저에서 최초에 '/'(root) 경로를 요청하면
2. 서버에서 React Web App을 내려준다.
3. 내려 받은 React App에서 '/' 경로에 맞는 컴포넌트를 먼저 보여준다.
4. React App에서 다른 페이지로 이동하는 동작을 수행하게 된다면 새로운 경로의 컴포넌트를 보여준다.

React 범주에서 다음과 같은 라우팅 과정을 처리하기 어렵기 때문에 react-router-dom을 사용합니다.
해당 패키지는 CRA(Create React App)에 기본으로 내장된 패키지가 아니고, 또한 Facebook의 공식적인 패키지도 아닙니다.

---

React-Router 사용해보기

npm i react-router-dom

• 가장 대표적인 리액트 라우팅 패키지(SPA)를 사용해보자.

• 다음과 같이 cra로 만들어진 프로젝트의 src 안에 pages 폴더를 만들어 줘서 각각의 jsx 파일들로 라우팅 될 수 있도록 만들어 주었다.

• 다음과 같이 각각의 페이지에 jsx 형식으로 컴포넌트들을 제작해 주었다. 

import { BrowserRouter, Route } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
      <Route path="/profile" component={Profile} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

export default App;

• <BrowserRouter>와 <Route>를 사용하여 다음과 같이 path와 component들을 매핑해 주었다.
• 브라우저에서 요청한 경로에 Route의 path가 들어있으면 해당 component를 보여준다.
• (주의) React-Router-Dom 구버전에서 진행된 프로젝트입니다.

 

 

레퍼런스

• https://slides.com/woongjae/react2021#/21/7