[React] 페이지 라우팅 - React SPA & SCR

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

 

 

 

새로운 프로젝트를 위해 emotion-diary react앱을 새로 만들었다.

 

 

 

 

안쓰는 파일들 삭제해주고 

 

 

 

리액트 라우터 라이브러리를 설치해줄 것이다

 

 

리액트 라우터 

npm install react-router-dom@6

터미널에 위 명령어를 입력해주고 설치가 완료되면 

 

 

package.json에 들어가서 제대로 설치가 완료되었는지 다시 확인한다

 

 

정상적으로 설치가 되었다는걸 확인할 수 있다.

 

이제 프로젝트 구동!

 

페이징에 필요한 js 파일들을 만들어주고 

 

 

각각 파일별로 페이지 역할을 할 컴포넌트들을 만들고 export 까지 적어주었다.

 

 

 

 

이제 App 컴포넌트 설정

Home 부터 차근차근 네 개의 페이지들을 

react router dom을 사용해 특정 주소에 연결해서 페이지라우팅을 할 것이다

 

 

import './App.css';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
      </div>
    </BrowserRouter>
  );
}

export default App;

BrowserRouter를 임포트하고 앱컴포넌트 리턴부분에 최상위태그로 감싸주었다.

이제 browser url과 매핑될 수 있다

 

import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';

사용할 페이지들도 앱컴포넌트에 import해주었다.

 

 

 

 

 

 

라우팅시작

브라우저 url이 바뀌면 해당컴포넌트가 페이지역할을 하게된다.

 

 

        <Routes>
          <Route/> //실제 url이 들어갈 곳
        </Routes>

 

 

 

 

 

App.js만 보이던 화면에 Route를 추가해준다

 

 

 

 

        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>

 \ >> path가 인덱스인곳에 라우트프로바이더가 Home 컴포넌트를 페이징 랜더링 할것이다 

 

 

 

Home 컴포넌트가 등장하고 리액트 디벨로퍼 툴스로 확인해보면 Route.Provider 컴포넌트 밑에 방금 매핑한 Home이 들어간 것을 확인 할 수 있다.

 

 

 

 

 

 

 

Route에 없는 경로를 적고 개발자도구를 확인해보면 경고가 뜬다

 

 

 

 

 

 

 

 

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

new 컴포넌트도 라우팅한 후 확인해보자

 

 

 

 

 

 

참고

a 태그로 페이지를 이동시키면 SPA이아닌 MPA방식으로 페이지 라우팅 (새로고침처럼 깜빡임)

 

 

 

 

 

 

---

리액트에서 SPA방식으로 페이지이동

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

const RounteTest = () => {
    return <>
        <Link to={'/'}> Home </Link>
        <br />
        <Link to={'/diary'}> Diary </Link>
        <br />
        <Link to={'/new'}> New </Link>
        <br />
        <Link to={'/edit'}> Edit </Link>
        <br />
    </>
}

export default RounteTest;

테스트를 위해 컴포넌트 폴더아래에 RouteTest.js를 생성했다

 

 

새로고침 없이 컴포넌트가 리랜더링되면서 페이지가 이동 되는걸 클라이언트 사이드 랜더링 방식으로 리액트 라우터를 이용해 구현해보았다. 

 

 

 

 

 

 

개발자 콘솔을 보면 Rounte.Provider 가 CSR방식을 이용해 페이지 역할을 하는 컴포넌트를 url과 함께 갈아끼워 페이지가 이동하는 것 처럼 보인다. 

 

페이지 전환시 깜빡임이 없고 이동속도가 매우빨라 쾌적하게 이용할 수 있다.

 

 

 

 

 

 

참고 : 

- 한 입 크기로 잘라먹는 리액트