Router

Router

※ 24.05.04 부로 수정하였습니다.

 

1. Router

• Router란? 사용자의 웹 애플리케이션 내에서 다양한 URL 경로에 따라 다른 컴포넌트를 렌더링하기 위한 도구입니다.
• React 애플리케이션의 라우팅을 관리하고, URL에 따라 애플리케이션의 다른 부분을 표기할 수 있게 합니다.
• 이를 통해, 사용자가 애플리케이션을 사용할 때, 뒤로 가기, 앞으로 가기, 북마크 등과 같은 브라우징 기능 사용 가능합니다.

    ※ Router를 사용하려면, React Router 라이브러리를 설치해야 합니다.

 

2. Router 특징

• Router에는 여러가지 컴포넌트가 존재합니다.
• BrowserRouter
  • 컴포넌트 최상위에 작성되어 경로 변경에 대해 여러 편의 기능을 제공합니다.
• Routes
  • 여러 Route 컴포넌트를 감싸 Route에 지정된 경로와 브라우저 주소창에 입력한 URL 경로가 맞는 컴포넌트가 있다면 브라우저에 그립니다.
• Route
  • 브라우저에 렌더링 할 컴포넌트와 경로를 지정합니다.
  • Route 컴포넌트에 속성으로 path와 element를 부여합니다.
    • path : 브라우저에 렌더링할 컴포넌트의 경로입니다.
    • element : 경로에 따라 렌더링될 컴포넌트를 지정합니다.
• Link
  • a 태그와 비슷하게 경로 이동을 담당합니다.

 

3. 예시

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./Login/Login";
import Main from "./Main/Main";

const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Login />} />
        {/* <Route path="/signup" element={<Signup />} /> */}
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />
    </BrowseRouter>
  );
};

export default Router;

 

4. 정리하며

• 지금까지 Router에 대해 알아보았습니다.
• Router를 사용하면 브라우저의 URL을 기반으로 특정 컴포넌트를 렌더링할 수 있고, 페이지 간의 네비게이션을 구현할 수 있습니다.
• 이를 통해 React 애플리케이션에서 다양한 뷰를 관리하고 사용자의 상호작용에 따라 동적으로 페이지를 변경할 수 있습니다.