[React] Router Header

Router Header 만들기

사이트를 만들기 전에 먼저 필요한 페이지를 확인한 후 각 페이지별 경로지정을 해준다.

• index.js 최상위 폴더 : createBrowserRouter를 이용하여 라우터 설정
  & App컴포넌트 자리에 RouterProvider로 router를 보내준다.
• App.js : Navbar(Header) & Outlet(하위 경로 요소를 렌더링)
• Link to를 사용하여 navbar 메뉴별 경로이동

1. index.js : 라우터 지정

npm i react-router-dom

• page폴더와 components폴더 생성
• page폴더에 필요한 페이지의 컴포넌트들을 생성
• createBrowserRouter : DOM History API 를 사용 하여 URL을 업데이트하고 기록 스택을 관리 createBrowserRouter
  현재 페이지가 로드된 탭 또는 프레임에서 방문한 페이지를 조작할 수 있다.
• RouterProvider를 사용하여 라우터 지정

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { createBrowserRouter } from "react-router-dom";
import NotFound from "./page/NotFound";
import Home from "./page/Home";
import AllProducts from "./page/AllProducts";
import NewProduct from "./page/NewProduct";
import ProductDetail from "./page/ProductDetail";
import MyCart from "./page/MyCart";
import { RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, path: "/", element: <Home /> }, //index로 '/' 메인페이지 지정
      { path: "/products", element: <AllProducts /> },
      {
        path: "/products/new",
        element: <NewProduct />
      },
      {
        path: "/products/:id", // product / id 일경우 detail page로 이동
        element: <ProductDetail />,
      },
      {
        path: "/carts",
        element:<MyCart />
      },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} /> //router지정
  </React.StrictMode>
);

2. App.js : 기획한 웹의 레이아웃에 맞게 컴포넌트 지정

• Outlet컴포넌트를 사용해서 라우터에 설정한 children을 보여준다.
• Navbar.js 또는 Header.js 컴포넌트 / Footer.js를 배치

// App.js

import { Outlet } from "react-router-dom";
import "./App.css";
import Navbar from "./components/Navbar";

function App() {
  return (
    <>
        <Navbar />
        <Outlet /> // index.js에서 지정한 children을 보여줌
    </>
  );
}

export default App;

3. Navbar.js 컴포넌트 : Link to 사용하기

• Logo click => "/" 이동
• nav menu click => "라우터 설정 경로" 이동
• User.js : Login시 받아온 user의 정보를 해당 navbar에 사용

// Navbar.js

import { Link } from "react-router-dom";
import User from "./User";
import Button from "./ui/Button";

function Navbar() {
  return (
    <header>
      <Link to="/"> 
    	<h1>MIOGY STUDIO</h1>
      </Link>
      <nav>
        <Link to="/products">Products</Link>
        <Link to="/carts">Carts</Link>
       	<Link to="/products/new">New</Link>
        <User />
        <Button>Login</Button>
      </nav>
    </header>
  );
}
export default Navbar;

• 여기 로그인 버튼은 따로 Button.js 컴포넌트로 만들어서 사용할수 있게 하였다.

// Button.js

export default function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text} // Navbar.js : 버튼 내에 지정된 text를 props받아서 적용
    </button>
  );
}

// Navbar.js에서 버튼 수정
	{!user && <Button text="Login" onClick={login}></Button>}
    {user && <Button text="Logout" onClick={logout}></Button>}

• onClick이벤트가 적용되고 login상태일 경우 Logout을 text로 받아서 적용이 되고
  logout일 경우 Login을 text로 받아서 버튼에 적용이 된다.

다음은 Firebase를 이용하여 구글로그인 적용을 해본다.

---

라우터 설정에 대하여

기존에 방식은 상위컴포넌트에서 Router > Header > Routes > Route path="/" element={ < 컴포넌트 /> } 방식으로 진행을 했다. 처음 Router사용했을때의 방식이 베어 있어 그대로만 사용하려 했었던 것 같다. 이번에 createBrowserRouter를 사용하여 라우터 설정을 따로 하고 보니 코드가 잘 보이는 것 같다.