React Router: 개념 및 실용 가이드(1부)

React Router 최종 가이드: 개념 및 실용 가이드

소개

라우팅은 모든 최신 웹 애플리케이션에서 필수적인 기능입니다. 이를 통해 사용자는 서로 다른 섹션이나 페이지 사이를 원활하게 탐색할 수 있어 원활하고 대화형 경험을 만들 수 있습니다. React에서는 단일 페이지 애플리케이션(SPA)에서 라우팅을 처리하도록 설계된 강력한 라이브러리인 React Router를 사용하여 이를 달성합니다.

React Router는 동적 및 중첩 경로 생성, URL 매개변수 처리, 보호된 경로 구현 등의 프로세스를 단순화합니다. 이 종합 가이드에서는 React Router의 모든 측면을 살펴보고 개념을 단계별로 분석하고 실제 사례를 통해 구현해 보겠습니다.

React Router란 무엇인가요?

React Router는 React 애플리케이션에서 라우팅을 관리하기 위한 선언적 구성 요소 기반 라이브러리입니다. 현대적인 접근 방식을 사용하여 URL을 구성 요소에 매핑하므로 개발자는 확장 가능하고 동적인 SPA를 쉽게 구축할 수 있습니다.

React Router의 주요 기능

1. 선언적 라우팅: 경로를 구성 요소로 정의하여 라우팅 시스템을 쉽게 이해하고 유지 관리할 수 있습니다.
2. 동적 라우팅: /user/:id와 같은 URL의 동적 매개변수를 처리하여 유연하고 재사용 가능한 경로를 만듭니다.
3. 중첩 경로: 경로를 계층적으로 구성하여 상위-하위 관계를 활성화합니다.
4. 보호된 경로: 인증 또는 승인 뒤에 있는 특정 경로를 보호합니다.
5. 프로그래밍 방식 탐색: 사용자 작업에 따라 프로그래밍 방식으로 페이지 간을 탐색합니다.
6. 브라우저 기록 지원: 앞으로, 뒤로, 새로 고침 작업을 포함한 브라우저 탐색과 동기화됩니다.

React Router 설치

시작하기 전에 프로젝트에 React Router를 설정해 보겠습니다. npm 또는 Yarn을 사용하여 라이브러리를 설치합니다.

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

설치가 완료되면 React Router를 애플리케이션에 통합할 수 있습니다.

React Router 핵심 개념

React Router는 라우팅 시스템의 기초를 형성하는 몇 가지 핵심 개념을 중심으로 진행됩니다. 단계별로 분석해 보겠습니다.

1. 브라우저라우터 및 라우터 구성요소

React 애플리케이션의 최상위 수준에서는 라우터 내부에 모든 것을 래핑해야 합니다. React Router는 여러 유형의 라우터를 제공하지만 가장 일반적인 것은 브라우저의 기록 API를 사용하여 탐색을 관리하는 BrowserRouter입니다.

BrowserRouter 주요 포인트

• 라우팅에 필요한 컨텍스트를 제공합니다.
• 브라우저 URL의 변경 사항을 수신하고 그에 따라 구성요소를 다시 렌더링합니다.
• HashRouter와 같은 다른 유형의 라우터는 탐색을 위해 URL에 해시(#)를 사용하지만 최신 애플리케이션에서는 BrowserRouter가 더 일반적으로 사용됩니다.

브라우저 라우터 사용 방법

다음은 BrowserRouter 사용의 기본 예입니다.

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

설명:

• react-router-dom에서 BrowserRouter를 가져옵니다.
• BrowserRouter 구성 요소는 라우팅 기능을 활성화하기 위해 전체 애플리케이션을 래핑합니다.

참고: 애플리케이션 루트에는 BrowserRouter가 하나만 있을 수 있습니다.

2. 경로 및 경로 구성요소

앱을 BrowserRouter로 래핑한 후 Routes 및 Route 구성 요소를 사용하여 개별 경로를 정의합니다.

경로와 경로 구성요소란 무엇인가요?

• 경로: 애플리케이션의 모든 경로에 대한 컨테이너입니다.
• 경로: 단일 경로를 나타내며 다음을 정의합니다.
  • path: 일치시킬 URL 경로입니다.
  • element: 경로가 일치하는 경우 렌더링할 React 구성 요소입니다.

기본 예시

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

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My App</h1>
                <p>Routing starts here!</p>
            </div>
        </BrowserRouter>
    );
}

export default App;

설명:

1. path="/": 이 경로는 루트 URL(/)과 일치하고 홈 구성 요소를 렌더링합니다.
2. path="/about": /about과 일치하고 About 구성 요소를 렌더링합니다.
3. URL이 변경되면(예: /about) React Router는 해당 구성요소를 자동으로 렌더링합니다.

3. 링크 및 NavLink 구성 요소

React 애플리케이션에서는 전통적인 탐색용 태그를 사용하면 브라우저가 페이지를 다시 로드하게 됩니다. React Router는 페이지 새로 고침 없이 원활한 탐색을 위해 Link 및 NavLink 구성 요소를 제공합니다.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

• 링크는 기존 태그.
• to prop을 사용하여 대상 경로를 지정하세요.

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom