[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(5) react router 설정

[이전글] 2024.08.08 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(4) eslint + prettier + commitlint 설정 (+husky)

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(4) eslint + prettier + commitlint 설정 (+hu

저번 글에서는 코드 스타일을 해줄 Prettier, 린트를 해줄 Eslint, 커밋 메시지를 린트해줄 commitlint가 무엇인지 그리고 설정에 대해 살펴보면서 코드를 짜기 전의 사전 준비는 완료했다. 
👩🏻‍💻 오늘은 react router 설정에 대해 살펴보자.

클라이언트 사이드 라우팅

리액트 라우터는 "클라이언트 사이드 라우팅"을 해준다.

전통적인 웹사이트의 브라우저는 웹 서버로부터 document 요청을 한 후,

응답으로 받은 css와 js asset등을 다운로드하고 평가해서 HTML 랜더를 한다.

사용자가 링크를 클릭하면 새로운 페이지를 그려주기 위해 이 과정을 요청을 하는 첫 단계부터 다시 시작한다.

 

반면 클라이언트 사이드 라우팅은 서버한테 document 요청을 할 필요 없이,

바로 새로운 UI 일부를 랜더하고 fetch를 통해서 새 페이지에 대한 정보로 업데이트할 데이터 요청을 할 수 있도록 한다.

이렇게 완전히 새로운 document를 요청하거나, css/js에 대한 재연산을 할 필요가 없기 떄문에 사용자들은 더 빠른 유저 경험을 할 수 있게 된다.

 

클라이언트 사이드 라우팅은 Router를 생성하고 Link와 <Form/>으로  link/submit해서 활성화할 수 있다.

설치

yarn add react-router-dom

설정

• constants/url.ts : url관련 상수들을 모아둔 파일. page에 관한 경로를 이 파일에 모아두었다.

export const PAGE = {
  MAIN: '/',
  ERROR: '/error',
  MYPAGE: '/mypage',
  SEARCH: '/search',
  MUSIC_INFO: '/music-info',
  LOGGED_IN: '/me',
};

• routes/router.tsx : createBroswerRouter 설정을 해주자.

import { PAGE } from '@/constants/url';
import { BaseLayout } from '@/layout/BaseLayout';
import ErrorPage from '@/pages/ErrorPage';
import MainPage from '@/pages/MainPage';
import MusicInfoPage from '@/pages/MusicInfoPage';

import NotFoundPage from '@/pages/NotFoundPage';
import SearchPage from '@/pages/SearchPage';
import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
  {
    element: <BaseLayout />,
    children: [
      {
        path: PAGE.MAIN,
        element: <MainPage />,
        errorElement: <ErrorPage />,
      },
      {
        path: PAGE.LOGGED_IN,
        element: <MainPage />,
        children: [{ path: PAGE.LOGGED_IN, element: <MainPage /> }],
        errorElement: <ErrorPage />,
      },
      {
        path: PAGE.MUSIC_INFO,
        element: <MusicInfoPage />,
        errorElement: <ErrorPage />,
      },
      {
        path: PAGE.SEARCH,
        element: <SearchPage />,
        errorElement: <ErrorPage />,
      },

      {
        path: '*', // 위의 페이지 이외의 경우는 notfound (404) 페이지를 보여주도록 하자.
        element: <NotFoundPage />,
      },
    ],
    errorElement: <ErrorPage />,
  },
]);
export default router;

• 위의 설정들을 보면
  • element 는 기본적으로 감싸줄 레이아웃이다. 
  • 각 children은 Outlet으로 각 route에 해당하는 콘텐츠를 보여준다.
• layout/BaseLayout.tsx

import { Outlet } from 'react-router-dom';
import Header from './Header';

export const BaseLayout = () => {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
};

• 라우터, tanstack query 등은 최상위에 제공해줄 기능들을 provider에 모아둘 예정이다. 다음과 같이 파일에 추가를 해주자.
• providers/router.tsx

import router from '@/routes/router';
import { RouterProvider } from 'react-router-dom';

const Router = () => {
  return <RouterProvider router={router} />;
};

export default Router;

• providers/index.tsx

import Router from './router';
 
const Providers = () => {
  return (
      <Router />
  );
};

export default Providers;

• App.tsx

import './app.scss';
import Providers from './providers'; 
function App() {
  return <Providers></Providers>;
}

export default App;

 

이제 페이지 url에 따라 페이지를 보여줄 수 있다.

메인 페이지 (/), 현재 재생 트랙 페이지 (/music-info)

검색 페이지(/search), not found (404) 페이지

---

 📚 References

https://reactrouter.com/en/main

Home v6.26.0 | React Router