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 구성 요소를 제공합니다.

링크 구성요소

링크 구성요소를 사용하면 페이지를 다시 로드하지 않고도 URL을 업데이트하여 경로 간을 탐색할 수 있습니다.

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을 사용하여 대상 경로를 지정하세요.

NavLink 구성 요소

NavLink 구성 요소는 Link와 유사하지만 활성화 여부에 따라 링크 스타일을 지정할 수 있습니다.

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;

주요 차이점:

• NavLink 구성 요소는 활성 링크 스타일을 지정하기 위해 activeClassName(또는 isActive) 속성을 추가합니다.

---

모두 합치기

이러한 개념을 작은 예제 애플리케이션으로 결합해 보겠습니다.

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

출력:

• 홈 페이지를 보려면 /로 이동하세요.
• /about으로 이동하여 정보 페이지를 확인하세요.
• 페이지가 다시 로드되지 않고 동적으로 업데이트됩니다.

---

다음 단계

이 부분에서는 기본 사항을 다루었습니다.

1. React Router가 무엇이고 어떻게 작동하는지
2. BrowserRouter 설정
3. 경로와 경로를 사용하여 경로를 정의합니다.
4. Link 및 NavLink로 탐색 추가

다음 기사에서는 다음 내용을 살펴보겠습니다.

• 중첩 라우팅
• 동적 경로
• URL 매개변수 처리

React Router 최종 가이드 시리즈의 다음 편을 기대해주세요!

위 내용은 React Router: 개념 및 실용 가이드(1부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!