[ React ] Router 정의하기

exceed_96·2024년 3월 2일

목록 보기

12/18

React는 흔히 SPA(Single Page Application)라이브러리이다. 하나의 HTML를 통해서 페이지 전환관 다양한 콘텐츠를 제공하는데 이번 포스팅에서는 React에서 제공하는 Router기능과 Router를 정의하는 방법에 대해서 간단하게 알아보자.

1. SPA를 왜 선호할까?

웹 사이트를 방문하면 일반적으로 도메인 이름 뒤에 경로를 첨부할 수 있다.

https://localhost:8000/welcome

위 예시에서는 "welcome"페이지를 로딩한다.

또 여기서 url경로의 "welcome"을 "info"로 변경하면 "info" 페이지가 로딩된다.

위와같은 경로를 바꾸면 다른 페이지를 로딩하는 과정이 라우팅이 하는 역할이다.

다만 위와같이 한다면 항상 새 콘텐츠를 가져와야 한다는 단점이 있다.

"경로를 전환할 때 새로운 콘텐츠를 가져오는건 당연한게 아니야?"라는 생각을 할 수 있다. 다만 새로운 요청을 보내고 새로운 응답을 받는 과정에서 사용자의 흐름이 중단될 수 있다는 단점이 있는 것이다.

즉, 지연이 발생하고 웹 사이트가 느려질 수 있다.

그래서 더 복잡한 페이지를 만들때는 SPA를 선호하게 된다.

SPA는 최초 "HTML요청"을 하나만 전송하고 HTML파일과 많은 추가적인 JS파일이 다운로드 되고 그 다음에 클라이언트에서 실행되는 추가 JS코드는 사용자가 화면에서 직접 조절 할 수 있다.

2. React Router 정의하기

1. React에서 Router를 정의하기 위해서는 react-router-dom패키지를 설치해줘야 한다.

npm i react-router-dom

해당 패키지를 통해서 URL변경을 감시하고 다양한 콘텐츠를 로딩할 수 있게 된다.

React에서 Router를 정의하는 방법은 여러가지가 있지만 이번 포스팅에서는 createBrowserRouter에 대해서 살펴보자.

2. 최상단 컴포넌트인 "App"컴포넌트에 cretaeBrowserRouter함수를 import시켜준다.

import { createBrowserRouter } from "react-router-dom";
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

3. createBrowserRouter함수 안에는 라우터 정의 객체로 된 배열을 넣어준다.

import { createBrowserRouter } from "react-router-dom";
import "./App.css";

createBrowserRouter([{}, {}, {}]);

function App() {
  return <div className="App"></div>;
}

export default App;

배열에는 객체원소들이 들어가고 객체들은 각각 하나의 Route를 나타낸다.

4. Route객체들을 활성화 하기 위해서는 몇 가지 속성을 정의해야 한다.

createBrowserRouter([
  {
    path: "",
  },
  {},
  {},
]);

그 중, 항상 추가할 속성은 path속성이다.

path속성은 Route가 작동해야 하는 경로를 정의한다.

참고로 경로는 도메인 뒤에 있는 경로를 의미한다. ex ) example.com/products

도메인 뒤에 아무것도 없다면 해당 path속성을 가진 객체는 시작페이지가 활성화 되는 Route이다.

createBrowserRouter([
  {
    path: "/",
  },
  {},
  {},
]);

두번째로 객체에 넣어야 할 속성으로는 해당 Route객체가 활성화 되었을 때 로딩되어야 하는 컴포넌트에 대한 정보인 element속성이다.

createBrowserRouter([
  {
    path: "/",
    element: "",
  },
  {},
  {},
]);

element속성은 이름에서 알 수 있듯 우리가 요소를 정의할 때 사용하는 속성이다.

import { createBrowserRouter } from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";

createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {},
  {},
]);

위와같이 element속성에 페이지 컴포넌트를 지정해주면 해당 Route가 활성화 될 때 element속성으로 지정된 페이지 컴포넌트를 렌더링 하게 된다.

여기까지가 첫번째 단계이다!

5. 이제 정의한 Router를 사용하기 위해 먼저 createBrowserRouter함수에서 리턴된 값을 변수나 상수에 저장해야 한다.

import { createBrowserRouter } from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {},
  {},
]);

function App() {
  return <div className="App"></div>;
}

export default App;

즉, 우리는 Router를 화면에 렌더링 해야 한다너간 또는 그 Router를 로딩해야 하고 적절한 페이지를 화면에 렌더링 해야 한다고 React에게 알려주기 위해서 반환된 값을 받을 상수가 필요한 것이다.

6. 반환된 Router정의를 사용하기 위해서는 RouterProvider 제공자 컴포넌트를 react-router-dom에서 import해줘야 한다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {},
  {},
]);

function App() {
  return <div className="App"></div>;
}

export default App;

해당 컴포넌트는 JSX코드에서 사용할 수 있는 컴포넌트이다.

해당 컴포넌트는 우리가 설정해야 하는 특수한 속성이 있다.

바로 router속성이다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {},
  {},
]);

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

router속성에 넣는 값은 createBrowserRouter로 생성한 Router를 넣어줘야 한다.

위 과정까지 마쳤다면 Router정의에 컴포넌트를 연결시키고 렌더링 하여서 활성화 시킬 준비가 끝났다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";
import InfoPage from "./Pages/InfoPage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/info",
    element: <InfoPage />,
  },
  {},
]);

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

"info" 더미페이지까지 만들어서 테스트해보면 위와같이 Router가 제대로 작동하는걸 확인할 수 있다.

3. Router를 정의하는 또 다른 방법

Router를 정의하는 또 다른 방법은 createRoutesFromElements함수를 import시켜준다.

import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements, //createRoutesFromElements import
} from "react-router-dom";

두번째로 Route컴포넌트도 import시켜주고 createRoutersFromElements함수를 이용하면 함수 내부에 컴포넌트를 추가해서 element로부터 Route를 정의할 수 있다.

import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";
import InfoPage from "./Pages/InfoPage";

const rootDefinition = createRoutesFromElements(<Route></Route>);

Route컴포넌트 안에 중첩 Route를 선언해주고 속성으로 path, element를 추가하여 경로와 Route에 접근할 때 어떤 컴포넌트를 렌더링 시켜줄 것인지 정의해준다.

import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";
import InfoPage from "./Pages/InfoPage";

const rootDefinition = createRoutesFromElements(
  <Route>
    <Route path="/" element={<HomePage />}></Route>
    <Route path="/info" element={<InfoPage />}></Route>
  </Route>
);

위와같이 해주면 createBrowserRouter로 만든 route정의를 이용해서 만든 "rootDefinition"을 Router로 이용할 수 있다.

import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import "./App.css";
import HomePage from "./Pages/HomePage";
import InfoPage from "./Pages/InfoPage";

const routeDefinition = createRoutesFromElements(
  <Route>
    <Route path="/" element={<HomePage />}></Route>
    <Route path="/info" element={<InfoPage />}></Route>
  </Route>
);

const router = createBrowserRouter(routeDefinition);