라우팅 및 동적 라우팅의 개념

라우팅은 웹 애플리케이션에서 사용자가 특정 URL로 이동할 때, 해당 URL에 대응하는 화면이나 컴포넌트를 보여주는 것을 의미합니다. 리액트에서는 주로 React Router를 사용하여 라우팅을 구현합니다.

React Router:

React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 제공하는 라이브러리입니다. 주요 컴포넌트로 BrowserRouter, Route, Link 등이 있습니다.

1. BrowserRouter:

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

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

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
};

2. Route:

Route 컴포넌트는 특정 URL에 대한 경로 매칭을 정의하고, 해당 URL에 접근하면 특정 컴포넌트를 렌더링합니다.

3. Link:

Link 컴포넌트는 사용자가 클릭할 수 있는 링크를 생성하며, 클릭하면 해당 경로로 이동합니다.

동적 라우팅:

동적 라우팅은 URL의 일부를 동적으로 변경하여 해당 동적 값에 기반하여 특정 컴포넌트를 렌더링하는 것을 의미합니다.

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

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
            <li>
              <Link to="/user/3">User 3</Link>
            </li>
          </ul>
        </nav>

        <Route path="/user/:id" component={UserProfile} />
      </div>
    </Router>
  );
};

이 예제에서 /user/:id는 동적인 URL을 나타냅니다. UserProfile 컴포넌트에서는 id를 동적으로 받아와서 해당 사용자의 프로필을 렌더링할 수 있습니다.

React Router를 사용하면 사용자의 상호작용에 따라 애플리케이션의 뷰를 동적으로 변경하고, URL을 통해 페이지를 공유하거나 새로고침할 때도 적절한 컴포넌트를 렌더링할 수 있습니다.