📐

React-Router 설정

IA(Information Architecture) 기획에 맞는 메뉴 구성

React-Router

•

정보 구조 기획(IA)이 웹 사이트 개발 중요 단계.

•

IA는 '메뉴 경로' 정리로 페이지 간 링크 및 <form> 설계.

•

리액트는 SPA로 동작, 여러 컴포넌트로 하나의 페이지에 표시.

•

React-Router로 브라우저 주소창에 따라 다른 화면 표시.

개발목표

React-Router를 적용해서 페이지의 이동이 가능하도록 컴포넌트들을 구성

Tailwind CSS를 이용해서 공통의 레이아웃을 구성하고 이를 통해서 페이지 기반의 애플리케이션을 구성

•

react router 설치

npm install react-router-dom
Shell
복사

•

기본 라우팅 설정

// src > router > root.js 파일 생성 후 작성

const { createBrowserRouter } = require("react-router-dom");
const root = createBrowserRouter([
])
export default root;
JavaScript
복사

// App.js 파일 수정

import {RouterProvider} from "react-router-dom";
import root from "./router/root";
function App() {
return (
		<RouterProvider router={root}></RouterProvider>
		);
}
export default App;
JavaScript
복사

•

페이지용 컴포넌트 추가와 설정

◦

pages라는 이름의 폴더 생성, MainPage.js 파일 추가

const MainPage = () => {
		return (
		<div className=" text-3xl">
				<div>Main Page</div>
		</div>
	);
}
export default MainPage;
JavaScript
복사

◦

첫 화면은 MainPage 컴포넌트가 보일 수 있도록 root.js 파일에 설정

import { Suspense, lazy } from "react";
const { createBrowserRouter } = require("react-router-dom");
const Loading = <div>Loading....</div>
const Main = lazy(() => import("../pages/MainPage"))
const root = createBrowserRouter([
		{
				path: ""
				,
				element: <Suspense fallback={Loading}><Main/></Suspense>
		}
])
export default root;
JavaScript
복사

◦

lazy() 지연로딩 동작 확인 ⇒ 컴포넌트로 AboutPage.js 추가

const AboutPage = () => {
return (
		<div className=" text-3xl">About Page</div>
	);
}
export default AboutPage;
JavaScript
복사

◦

‘/about’ 경로에서 페이지가 보이도록 root.js 설정

import { Suspense, lazy } from "react";
const { createBrowserRouter } = require("react-router-dom");
const Loading = <div>Loading....</div>
const Main = lazy(() => import("../pages/MainPage"))
const About = lazy(() => import("../pages/AboutPage"))
const root = createBrowserRouter([
	{
		path: ""
		,
		element: <Suspense fallback={Loading}><Main/></Suspense>
	},
	{
		path: "about",
		element: <Suspense fallback={Loading}><About/></Suspense>
	}
])
export default root;
JavaScript
복사

•

코드 스플리팅

◦

필요할 때까지 로그인하지 않는다.

◦

적용한 코드 확인

import { Suspense, lazy } from "react";

const { createBrowserRouter } = require("react-router-dom");

const Loading = <div>Loading....</div>
const Main = lazy(() => import("../pages/MainPage"))

const root = createBrowserRouter([
    {
        path: ""
        ,
        element: <Suspense fallback={Loading}><Main /></Suspense>
    }
])
export default root;
JavaScript
복사

•

리액트 라우터를 사용할 때는 <a> 태그를 사용할 수 없다!