react-router-dom이란

작성일 기준 시점으로 보았을때 주요 포털 사이트를 보면 spa의 라우팅 방식을 사용한다.
react에서는 sap 라우팅을 편리하게 해주는 라이브러리가 있는데 바로 react-router-dom 이다.

react-router-dom 사용법

1. 패키지 설치

우선 리엑트 프로젝트를 준비하거나 또는 연계하는 라이브러리를 같이 설치해서 준비했다면 패키지 설치를 해준다

• npm
  npm i react-router-dom
• yarn
  yarn add react-router-dom

2. 파일 준비

라이브러리를 설치하면 src 폴더에 다음과 같이 준비해주면 된다.
(생성한 jsx 파일은 rafce라는 단축어를 이용해 리엑트 기본 구조 세팅을 해주면 된다.)

3. Router.jsx 에 route 코드 작성

라우트의 기본적인 코드 작성은 다음과 같다

Router.jsx

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 해줘야 함
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성할것.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 해주기 때문.
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

4. 페이지 연결

계속해서 Router.jsx에 코드를 작성할껀데 3번에 봤던 폴더구조에서 page폴더에 있는 파일들을 연결 시켜줄것이다.

Router.jsx


import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "../pages/PageA";
import Contact from "../pages/PageB";
import Works from "../pages/PageC";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
				{/* 
						Route에는 react-router-dom에서 지원하는 props들이 있음.

						path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됨.
						element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줄것.
				 */}
        <Route path="/" element={<Home />} />
        <Route path="/" element={<PageA />} /> // 메인 페이지로 설정
        <Route path="PageB" element={<PageB />} />
        <Route path="PageC" element={<PageC />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

5. App.jsx에 Router.jsx를 import 해주기

router.js를 다른 곳도 아닌 App 컴포넌트에 연결 해주는 이유는 리엑트 프로젝트에서는 가장 최상위에 존재하는 컴포넌트가 App.jsx 이기 때문이다.

• (컴포넌트 동작순서 : App.jsx -> Router.jsx -> 각 페이지)

화면을 랜더링 하려면 무조건 App.js를 거쳐야 하기때문에 사실상 App.js에서 Router 설정을 해도 똑같이 동작한다.

App.jsx

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

6. 실행이 잘되는지 테스트하기!

(필자는 yarn을 사용하기 때문에 yarn의 기준으로 설명하겠다. 만약 npm을 사용하고 있다면 npm의 메뉴얼대로 할것!)

먼저 yarn dev를 터미널에 적고 로컬 주소가 생성되면 주소를 클릭해 브라우저를 실행한다
Router.js에서 작성한 코드중 path 부분에 적었던 단어를 브라우저 주소창 오른쪽 끝에 "/"를 와 같이 입력해준뒤 페이지로 이동이 되면 정상 작동이 되는것을 확인할수 있다!
만약 랜더링이 되지 않는다면 위의 과정을 처음부터 다시한번 해보면 될것이다.

(2024.09.04 TIL)