[AI Filter] 08. 3주차 마지막날

1. 컴포넌트 구조 작성

다음과 같이 컴포넌트 구조를 작성한 뒤 개발에 들어갔다.

2. 라우터 설정

우리는 라우팅을 위해 react-router-dom version 6를 이용한다.

import { Navigate, useRoutes } from "react-router-dom";
import MainLayout from "../Layout/main/index";

import Home from "../Pages/Home/Home";
import Introduction from "../Pages/Introduction/Introduction";
import QuickStart from "../Pages/Introduction/QuickStart";

import ImageFilterMain from "../Pages/TechDemos/ImageFilter/ImageFilterMain";
import WebCamFilterPage from "../Pages/TechDemos/WebCamFilter";

// 화면 라우팅 테이블
export default function Router() {
  return useRoutes([
    {
      path: "/",
      element: <MainLayout />,
      children: [
        { element: <Navigate to="/" replace /> }, 
        { path: "", element: <Home /> }
      ],
    },
    {
      path: "/Introduction",
      element: <MainLayout />,
      children: [
        { element: <Navigate to="/Introduction" replace /> }, 
        { path: '', element: <Introduction />},
        { path: "QuickStart", element: <QuickStart /> }
      ],
    },
    {
      path: "/TechDemos",
      element: <MainLayout />,
      children: [
        { element: <Navigate to="/TechDemos" replace /> },
        { path: '', element: <ImageFilterMain />},
        { path: "ImageFilter", element: <ImageFilterMain /> },
        { path: "WebCamFilter", element: <WebCamFilterPage /> },
      ],
    },
    { path: '*', element: <Navigate to="/404" replace /> }
  ]);
}

이때 children은 중첩 라우팅이다. 기존에는 Route 안에 Route를 선언하는 방식을 이용했지만 v6부터는 방식이 바뀌었다. 이때 부모루트 요소에서 자녀 루트 요소를 렌더링 하기 위해 <Outlet/>을 이용해야 한다. 이를 이용해 라우팅을 하였다.

[참고] https://reactrouter.com/docs/en/v6/api#outlet

3. 지금까지 결과물