SPA와 Router

SPA

• Single Page Application 는 단일 HTML 페이지를 로드하고, 사용자의 상호 작용에 따라 페이지를 동적으로 업데이트한다.
• SPA에서는 페이지 전체를 리로드하지 않고, 필요한 섹션, 컴포넌트만 동적으로 렌더링한다.
• HTML의 a 태그를 사용할 경우 페이지 전체가 리로드된다.
  • 페이지 전체 로드시 자바스크립트 라이브러리, CSS 등 다시 로드해야한다.

Router

• 라우팅은 사용자가 입력한 URL을 기반으로 애플리케이션의 특정 섹션을 표시하는 프로세스다.
• react router dom 설치하여 사용
  • npm install --save react-router-dom

Route

• 특정 경로에 대해 어떤 컴포넌트를 렌더링할지 정의한다.

  • BrowserRouter

    • 웹 브라우저의 뒤로 / 앞으로 가기 지원

  • Routes

    • 여러 Route를 그룹화한다.
    • 하위의 Route 컴포넌트의 경로 패턴을 정의한다.

  • Route

    • 각 경로에 따라 지정된 컴포넌트 렌더링
    • <Route path = '경로' element={<컴포넌트 />} exact />
      • exact : 경로가 정확히 일치할때만 (boolean)

  • Outlet

    • 중첩 라우팅을 구현하는 데 사용되는 컴포넌트.
    • Routes 컴포넌트 내부에서 Route를 정의할 때, 하위 라우트를 렌더링할 위치를 지정하는데 사용된다.
    • 이를 통해 각 경로에 따라 부모 라우트의 일부분만 변경하여 동적으로 컨텐츠를 렌더링할 수 있다.

Link

• 사용자가 클릭할 수 있는 링크를 생성한다.
• 페이지의 URL만 변경되고, Route에 정의된 컴포넌트가 렌더링 된다.
• 페이지 전체를 리로드하지 않는다.

예제 코드

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

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

const Users = () => (
    <div>
        <h2>Users Page</h2>
        <Outlet />
    </div>
);

const User = ({ id }) => <div>User {id}</div>;

const App = () => {
    return (
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/users">Users</Link>
                    </li>
                </ul>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/users" element={<Users />}>
                    <Route path=":id" element={<User />} />
                </Route>
            </Routes>
        </Router>
    );
};

export default App;