[GDSC] 8주차 수업

React Router

SPA(single page application) 환경에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리이다

페이지를 새로고침하지 않고 URL 경로에 따라 화면의 컴포넌트를 전환할 수 있도록 도와준다.

용어 정리

라우터: URL 경로와 컴포넌트(또는 페이지)를 연결해주는 기능

라우팅: 어떤 URL로 이동했을 때 그에 맞는 페이지나 컴포넌트를 보여주는 행위
즉, 라우터가 경로를 처리하는 과정

주요 기능

1. 클라이언트 사이드 라우팅:
   페이지 전페를 새로고침하지 않고 필요한 컴포넌트만 갱신한다.

2. URL 파라미터 지원:
   URL에 특정 데이터를 포함하여 컴포넌트에 전달할 수 있다.

3. 동적 라우팅:
   데이터나 조건에 따라 경로를 동적으로 처리한다.

4. 중첩 라우팅:
   라우트 안에 또 다른 라우트를 정의할 수 있다.

설치 방법

npm install react-router-dom

사용 방법

파일 구조

실행 결과

1. 메인 페이지
   
2. 예시 1
   
3. 예시2
   

• 간단한 컴포넌트 설명
  App.js에서 라우팅 기능을 사용한다고 명시를한다
  router/index.js에서 라우터를 정의하고 사용한다
  page/index.js(메인 페이지)에서 exam1.jsx(예시1)과 exam2.jsx(예시2)를 정의한다

App.jsx

import "./scss/style.scss";
import { RouterProvider } from "react-router-dom";
import router from "./router";

function App() {
  return <RouterProvider router={router} />;
}

export default App;

RouterProvider: react-router-dom v6에서 사용하는 컴포넌트로 라우터 설정 객체를 전달해 전체 애플리케이션에 라우팅을 적용한다

• router는 createBrowserRouter로 생성한 라우터 객체
• URL 변경시 해당 경로에 맞는 컴포넌트를 렌더링한다

router/index.js

import React, { Children, lazy, Suspense } from "react";
import { createBrowserRouter } from "react-router-dom";
import Loading from "../component/Loading";

const Page = lazy(() => import("../page/index"));
const Ex1 = lazy(() => import("../page/exam1"));
const Ex2 = lazy(() => import("../page/exam2"));

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <Suspense fallback={<Loading />}>
        <Page />
      </Suspense>
    ),
  },
  {
    path: "/one",
    element: (
      <Suspense fallback={<Loading />}>
        <Ex1 />
      </Suspense>
    ),
  },
  {
    path: "/two",
    element: (
      <Suspense fallback={<Loading />}>
        <Ex2 />
      </Suspense>
    ),
  },
]);

export default router;

createBrowserRouter는 라우터 객체를 생성하는 함수로, 브라우저의 히스토리 API를 사용해 경로 관리를 수행

• 경로와 컴포넌트 매핑을 정의하며, 중첩된 라우트도 지원
• 각 경로는 element 속성을 통해 해당 경로에 렌더링될 컴포넌트를 지정

Lazy Loading(Lazy)
컴포넌트를 필요할때 동적(필요한 시점에 맞춰 실행)으로 로딩한다.
즉 사용자가 특정 경로에 접근할 때 해당 경로의 컴포넌트가 로드 된다

• 초기 로딩 속도 개선
• 트래픽 최적화

Suspense
lazy-loaded 컴포넌트가 로딩될 동안 보여줄 ui를 지정한다.

• 작동 방식

1. 로딩 중: lazy 컴포넌트가 로드될 때까지 fallback으로 지정된 컴포넌트(loading)가 표시
2. 로드 완료: 컴포넌트가 로드되면 Suspense가 해당 컴포넌트를 렌더링한다

• 사용하는 이유
  비동기 렌더링을 통해 애플리케이션이 끊김 없이 동작하게 한다

component/Loading.jsx

import React from 'react'

const  Loading = () => {
  return (
    <div className='load'>Loading</div>
  )
}

export default  Loading

page/index.jsx

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

const index = () => {
  return (
    <div className="container">
      <div className="title">
        <div className="main-title">React-Router</div>
        <div className="exam">
          <Link className="ex1" to="/one">
            예시1
          </Link>
          <Link className="ex2" to="/two">
            예시2
          </Link>
        </div>
      </div>
    </div>
  );
};

export default index;

리액트에서는 다음과 같은 코드 같이 a 태그 대신 Link 컴포넌트를 사용한다.

React Router와 같은 라이브러리에서 클라이언트 사이드 라우팅을 지원하기 때문에 Link 컴포넌트를 사용한다

• Link 컴포넌트 사용 이유

1. 클라이언트 사이드 라우팅
2. 상태 관리 유리
   페이지가 리로드 되지 않기 때문에 로그인 상태나 전역 상태를 잃지 않는다
3. 성능 최적화
   서버 요청 없이 빠르게 페이지를 전환 가능

page/exam1.jsx

import React from "react";

const exam1 = () => {
  return <div className="ex-text">http://localhost:3000/one입니다</div>;
};

export default exam1;

page/exam2.jsx

import React from "react";

const exam2 = () => {
  return <div className="ex-text">http://localhost:3000/two 입니다</div>;
};

export default exam2;