React _ Router에서 상대경로와 절대경로

React Router에서 상대경로와 절대경로: 개념부터 활용까지

React Router에서 경로를 설정할 때 "상대경로"와 "절대경로"는 매우 중요한 개념이다. 특히 Link와 relative 속성을 적절히 사용하면 애플리케이션의 라우팅을 효율적으로 관리할 수 있다. 이번 글에서는 상대경로와 절대경로의 차이점, /의 유무, 그리고 relative 속성의 활용법까지 단계별로 다룬다.

---

1. 절대경로 (Absolute Path)

절대경로는 애플리케이션의 루트(/)를 기준으로 경로를 정의한다. URL이 항상 루트에서 시작되기 때문에 현재 위치와 상관없이 지정된 경로로 이동한다.

예시:

<Link to="/products">Products</Link>

• 항상 /products로 이동한다.
• 현재 경로와 상관없이 동일한 결과를 제공한다.

사용 시기:

• 전역적으로 접근해야 하는 경로 (예: 홈, 로그인 페이지 등).
• 브라우저의 URL 구조와 일치해야 할 때.

---

2. 상대경로 (Relative Path)

상대경로는 현재 URL 경로를 기준으로 동작하며, 현재 위치에 따라 이동 결과가 달라진다. React Router에서는 상대경로를 기본적으로 지원하며, 경로를 더 유연하게 관리할 수 있다.

상대경로의 기본 동작:

<Link to="details">Details</Link>

• 현재 경로가 /products라면 /products/details로 이동한다.
• 현재 경로가 /about라면 /about/details로 이동한다.

상대경로의 규칙:

1. . (현재 경로): 현재 경로를 기준으로 경로를 확장한다.
2. .. (부모 경로): 상위 경로로 이동한 뒤 새 경로를 지정한다.

예시:

<Link to="../home">Home</Link>

• 현재 경로가 /products/1이면 /products/home으로 이동한다.

---

3. /의 유무: 절대경로와 상대경로의 차이

React Router에서 경로가 /로 시작하면 절대경로로 처리되고, 그렇지 않으면 상대경로로 처리된다.

/로 시작하는 경우 (절대경로):

<Link to="/products">Products</Link>

• 항상 루트(/)를 기준으로 한다.

/ 없이 작성한 경우 (상대경로):

<Link to="products">Products</Link>

• 현재 경로에 따라 결과가 달라진다.
  • 현재 경로가 /이면 /products로 이동한다.
  • 현재 경로가 /about이면 /about/products로 이동한다.

---

4. relative 속성: 상대경로의 처리 방식 제어

React Router의 Link 컴포넌트는 relative 속성을 사용하여 상대경로의 기준을 명확히 설정할 수 있다. 기본적으로 relative="route"로 설정되어 있으며, 필요에 따라 relative="path"로 변경할 수 있다.

relative 속성 옵션

1. relative="route" (기본값)
   현재 라우트 경로를 기준으로 상대경로를 처리한다.
2. relative="path"
   현재 파일 경로(라우트 경로 포함)를 기준으로 처리한다.

---

relative 설정 예시

기본 설정 (relative="route"):

<Link to="details" relative="route">Details</Link>

• 현재 경로 /products라면 /products/details로 이동한다.

파일 경로 기준 (relative="path"):

<Link to="details" relative="path">Details</Link>

• 현재 경로 /products/:productId라면 /products/:productId/details로 이동한다.

---

5. 실습: 상대경로와 절대경로 활용하기

폴더 구조

/pages
  - Root.js
  - Products.js
  - ProductDetail.js
  - Error.js

라우터 설정

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: "products", element: <ProductsPage /> },
      { path: "products/:productId", element: <ProductDetail /> },
    ],
  },
]);

ProductsPage 컴포넌트 코드

import { Link } from "react-router-dom";

function ProductsPage() {
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {/* 상대경로 사용 */}
        <li><Link to="1">Product 1</Link></li>
        <li><Link to="2">Product 2</Link></li>

        {/* 절대경로 사용 */}
        <li><Link to="/products/3">Product 3</Link></li>

        {/* relative 속성 사용 */}
        <li><Link to="details" relative="path">Details for Current Product</Link></li>
      </ul>
    </div>
  );
}

export default ProductsPage;

---

6. 정리

• 절대경로는 항상 루트(/)를 기준으로 동작하며, URL이 고정된 경로를 설정할 때 적합하다.
• 상대경로는 현재 위치를 기준으로 동작하며, 계층적 구조를 설계할 때 유용하다.
• relative 속성은 상대경로의 기준을 세밀하게 조정할 수 있어 특정 상황에서 매우 유용하다.
• 상대경로와 절대경로를 적절히 활용하면 React Router 기반 애플리케이션의 라우팅을 더욱 효율적으로 설계할 수 있다.