react router v 6.4 체험기

날짜: 2023년 2월 25일
생성일: 2023년 2월 25일 오후 5:12
태그: 프론트 엔드

원티드 프리온보딩 사전 과제를 하면서 react router v6.4에서 좀 많이 바뀐듯한 react router를 사용해봤다.

https://reactrouter.com/en/main

Home v6.8.1

 

root router 설정 하기

초기 디렉토리 & 최종 디렉토리

디렉토리 설정은 이렇게 했다.

import { createBrowserRouter } from "react-router-dom";
import HomePage from "./HomePage";
import LoginPage from "./LoginPage";

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

export default RootRouter;

• createBrowserRouter를 통해 전체 적인 route를 설정 해준다.

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import RootRouter from "./routes/root";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <RouterProvider router={RootRouter} />
  </React.StrictMode>
);

• 그 이후에 RouterProvider 에 router로 전해주면 라우터로 간단하게 보여줄 수 있게 된다.

 

홈페이지와 로그인 페이지

nested Router

rootRouter.js

{
    path: "/",
    element: <HomePage />,
    children: [
      {
        path: "sub/:pageName",
        element: <SubPage name={"A"} />,
      },
    ],
  },

다음과 같이 children 값을 넣으면 nested가 되고, HomePage 에서 <Outlet /> 태그를 이용해서 렌더링 할 수 있다.

HomePage.js

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

const HomePage = (props) => {
  return (
    <div>
      <h1>홈페이지</h1>
      <div>
        <header>
          <h1>Wanted Pre-onbording course : yeongi</h1>
        </header>
        <Outlet />
      </div>
    </div>
  );
};

export default HomePage;

결과 화면

페이지 이동

sidebar.js

import { Link } from "react-router-dom";

const Sidebar = (props) => {
  return (
    <>
      <nav>
        <Link to={`sub/A`}>page A</Link>
        <Link to={`sub/B`}>page B</Link>
        <Link to={`sub/C`}>page C</Link>
      </nav>
    </>
  );
};

export default Sidebar;

<Link> 태그를 이용해서 페이지를 이동한다.

to : path 설정

FORM 태그

• react router v6.4 부턴 Form 태그와 loader를 이용해서 데이터를 주고 받게 된다.

import { useState } from "react";
import { Form } from "react-router-dom";

const LoginForm = () => {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  return (
    <Form method="post" action="/login">
      <p>
        <label>ID : </label>
        <input type="text" name="id" />
      </p>
      <p>
        <label>PW : </label>
        <input type="password" name="pw" />
      </p>
      <input type="submit" value={"전송하기"} />
    </Form>
  );
};

export default LoginForm;

• Form 태그를 “react-router-dom"에서 가져와서 action을 지정 해준다.

import { redirect } from "react-router-dom";

const loginAction = async ({ request }) => {
  //   const formData = await request.formData();
  const data = Object.fromEntries(await request.formData());
  console.log(data, request);
  //아이디 비밀번호를 확인하는 로직

  return redirect("/");
};

export default loginAction;

• action 함수를 정해주고, 이 함수를 path에 맞는 action 속성에 정해준다.

{
    path: "/login",
    element: <LoginPage />,
    action: loginAction,
},

 

 

나의 생각

• 루트 라우터에서 구조적으로 한눈에 알아 볼 수 있고, 각각 로더와 액션을 지정해 역할을 분리 했다.
• 컴포넌트의 역할, 로직 분리도 되는거 같고, 덩치가 큰 프로그램을 개발을 더 잘 하기 위해 구조를 바꾸지 않았냐는 생각이 든다.

 

 

소스 코드가 있는 git 저장소

 

https://github.com/yeongi/wanted-pre-onboarding-3-FE-quest

GitHub - yeongi/wanted-pre-onboarding-3-FE-quest: 3월 원티드 프리온보딩 프론트엔드 과정 사전과제