React Router

React Router는 React 애플리케이션에 클라이언트 사이드 라우팅을 제공해 단일 페이지 애플리케이션에서 다중 페이지처럼 사용자에게 다양한 화면을 보여줄 수 있도록 합니다. 

---

 React Router

 1. React Router의 역할과 필요성

 주요 개념 설명
- React Router는 URL을 기반으로 다양한 컴포넌트를 렌더링할 수 있도록 도와줍니다. React는 기본적으로 단일 페이지 애플리케이션(SPA)이지만, React Router를 사용하면 여러 페이지처럼 보이는 UI를 만들 수 있습니다.
- 역할과 필요성: 페이지 리로드 없이 URL 변경을 통해 사용자에게 여러 화면을 보여줄 수 있습니다. 라우팅을 통해 UI와 상태를 URL과 동기화하며, URL을 통해 특정 페이지에 직접 접근할 수 있도록 합니다.

 사용 시나리오
- 다중 페이지 애플리케이션처럼 보여야 하는 SPA에서 유용합니다. 예를 들어, 홈 페이지, 사용자 페이지, 설정 페이지 등 다양한 화면으로 구성된 애플리케이션에서 사용됩니다.

---

 2. 주요 API: `BrowserRouter`, `Route`, `Link`, `Switch`

주요 개념 설명
- BrowserRouter: 애플리케이션의 기본 라우터로, `history` API를 사용해 브라우저 주소를 관리합니다.
- Route: URL 경로에 따라 특정 컴포넌트를 렌더링합니다.
- Link: 페이지 이동을 위한 네비게이션 링크로, 페이지 전체를 리로드하지 않고 URL을 변경하여 애플리케이션을 이동하게 합니다.
- Switch: 여러 `Route` 중 하나의 경로가 일치할 때 그 경로에 해당하는 첫 번째 컴포넌트만 렌더링하도록 합니다.

사용 시나리오
- BrowserRouter는 애플리케이션 전체에서 라우팅을 설정할 때 사용합니다.
- Route는 특정 URL 경로와 연결된 컴포넌트를 렌더링할 때 유용합니다.
- Link는 페이지 간 이동을 돕고, 페이지 새로고침 없이 URL을 업데이트합니다.
- Switch는 여러 경로가 있는 경우 첫 번째로 일치하는 경로만 렌더링하게 해 줍니다.

예시 코드

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

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

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

function App() {
    return (
        <Router>
            <nav>
                <Link to="/">Home</Link> | <Link to="/about">About</Link>
            </nav>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

export default App;

---

 3. 라우팅 설정과 URL 파라미터 처리

 주요 개념 설명
- 라우팅 설정: `Route` 컴포넌트를 사용해 특정 경로에 맞는 컴포넌트를 렌더링합니다. `path` 속성에 경로를 지정하고, `exact` 속성을 통해 정확히 일치하는 경로일 때만 컴포넌트를 렌더링하게 할 수 있습니다.
- URL 파라미터: 경로에 변수를 포함하여 동적으로 값을 전달할 수 있습니다. 예를 들어, `path="/user/:id"`와 같이 설정하면 URL의 `id` 값을 파라미터로 받을 수 있습니다.

사용 시나리오
- 정확한 라우팅이 필요할 때 `exact` 속성을 사용합니다. URL에 특정 ID나 동적 데이터를 전달하고 싶을 때 파라미터를 사용합니다.

예시 코드

import React from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

function User() {
    const { id } = useParams();
    return <h2>User ID: {id}</h2>;
}

function App() {
    return (
        <Router>
            <nav>
                <Link to="/user/1">User 1</Link> | <Link to="/user/2">User 2</Link>
            </nav>
            <Route path="/user/:id" component={User} />
        </Router>
    );
}

export default App;

 

---

 4. 중첩 라우팅 및 리다이렉트

주요 개념 설명
- 중첩 라우팅: 한 페이지 안에서 추가적인 라우팅이 필요한 경우 사용합니다. 예를 들어, `User` 페이지에서 `Profile` 및 `Settings`와 같은 하위 페이지를 제공할 때 중첩 라우팅을 사용합니다.
- 리다이렉트: 특정 경로로 이동시키는 기능입니다. 예를 들어, 로그인 상태가 아닐 때 사용자에게 로그인 페이지로 이동하도록 할 수 있습니다.

사용 시나리오
- 중첩 라우팅은 대시보드와 같은 복잡한 페이지 구조에서 각 섹션을 개별적으로 관리할 때 유용합니다.
- 리다이렉트는 보안이 필요한 페이지에서 인증 상태에 따라 접근을 제한할 때 사용합니다.

예시 코드

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, Redirect, useRouteMatch } from 'react-router-dom';

function User() {
    let { path, url } = useRouteMatch();
    return (
        <div>
            <h2>User Page</h2>
            <nav>
                <Link to={`${url}/profile`}>Profile</Link> | <Link to={`${url}/settings`}>Settings</Link>
            </nav>
            <Switch>
                <Route exact path={path} render={() => <h3>Select a section</h3>} />
                <Route path={`${path}/profile`} render={() => <h3>Profile Section</h3>} />
                <Route path={`${path}/settings`} render={() => <h3>Settings Section</h3>} />
            </Switch>
        </div>
    );
}

function App() {
    const isAuthenticated = false;

    return (
        <Router>
            <nav>
                <Link to="/">Home</Link> | <Link to="/user">User</Link>
            </nav>
            <Switch>
                <Route exact path="/" render={() => <h2>Home Page</h2>} />
                <Route path="/user">
                    {isAuthenticated ? <User /> : <Redirect to="/" />}
                </Route>
            </Switch>
        </Router>
    );
}

export default App;

 

---

 5. 실습 예제: 다중 페이지 애플리케이션 구조 설정

 주요 개념 설명
이 실습에서는 React Router를 사용해 기본적인 다중 페이지 애플리케이션 구조를 설정합니다. `Home`, `About`, `User`, `NotFound` 페이지를 만들고, URL에 따라 해당 페이지가 렌더링되도록 합니다.

 예시 코드

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

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

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

function User() {
    return <h2>User Page</h2>;
}

function NotFound() {
    return <h2>404 - Page Not Found</h2>;
}

function App() {
    return (
        <Router>
            <nav>
                <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/user">User</Link>
            </nav>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/user" component={User} />
                <Route component={NotFound} /> {/* 404 페이지 */}
            </Switch>
        </Router>
    );
}

export default App;

다중 페이지와 같은 구조를 효과적으로 구성할 수 있습니다.