[Face Review] react-router-dom 라이브러리를 사용한 라우팅

Face Review를 기획하면서, 여러 페이지로 구성되기 때문에 router를 통해 관리하기로 했다. TypeScript를 사용했기 때문에 아래와 같이 패키지를 설치해 준다.

npm install react-router-dom
npm install @types/react-router-dom

그 다음 Router.tsx파일을 만들고 App.tsx에서 Router 컴포넌트를 통해 각각의 페이지를 라우팅하도록 하였다.

// App.tsx 일부

import Router from "./components/Router";
import { Helmet } from "react-helmet-async";

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>FaceReview</title>
      </Helmet>
      <Router />
    </div>
  );
}

export default App;

react-helmet-async라이브러리의 Helmet을 사용해서 페이지의 타이틀을 FaceReview로 설정해주었다.

그 아래의 Router 컴포넌트를 통해 페이지 라우팅을 관리!

// Router.tsx 일부

// import ... 생략

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<ScreenContainer headerShown={true} />}>
          <Route path="/main" element={<MainPage />} />
          <Route path="/watch/:id" element={<WatchPage />} />
          <Route path="*" element={<MainPage />} />
        </Route>
        <Route element={<ScreenContainer headerShown={false} />}>
          <Route path="/auth/:step" element={<AuthPage />} />
        </Route>
    </BrowserRouter>
  );
};

export default Router;

각각의 페이지에서 레이아웃 및 헤더 렌더링여부 등을 공통으로 관리하기 위해 ScreenContainer라는 컴포넌트를 만들어서 그 안에 Outlet을 통해 하위 컴포넌트들(페이지들)을 렌더링 한다.
headerShown은 헤더의 렌더링여부를 결정하는 prop으로, true일 때만 Header 컴포넌트를 렌더링한다.

// ScreenContainer.tsx 일부

import { Outlet, useNavigate } from "react-router-dom";

const ScreenContainer = ({
  headerShown,
  isAdmin = false,
  isSignIn = false,
}: {
  headerShown: boolean;
  isAdmin?: boolean;
  isSignIn?: boolean;
}): ReactElement => {
  const { is_sign_in, is_admin } = useAuthStorage();

  const navigate = useNavigate();

  useLayoutEffect(() => {
    if (isAdmin && !is_admin) {
      navigate("/");
    }
    if (isSignIn && !is_sign_in) {
      navigate("/auth/1");
    }
  });

  return (
    <div className="screen-container">
      {headerShown ? <Header /> : null}
      <Outlet />
    </div>
  );
};

export default ScreenContainer;

return 부분을 보면, headerShown prop의 값에 따라 Header 컴포넌트의 렌더링 여부를 결정하고, react-router-dom 라이브러리의 Outlet을 사용해 Router에서 하위 컴포넌트를 ScreenContainer 내부에 렌더링하도록 작성하였다.

useAuthStore는 zustand를 통해 상태를 관리하는 Store인데, 해당 상태에 따라 특정 페이지의 접근을 제한하며, 더 자세한 설명을 위해 아래의 글에서 다루었다.

Face Review - Zustand를 사용한 상태관리
https://velog.io/@juwon98/Face-Review-Zustand