ReactJS 라우팅과 경로 매개변수: 사용자 경험을 혁신하는 방법

웹 애플리케이션에서 사용자 경험(UX)은 성공의 핵심입니다. 사용자가 여러 페이지를 오가며 정보를 탐색할 때, 매번 페이지 전체가 새로고침되는 것은 지루하고 비효율적입니다. 이러한 문제를 해결하고, 부드럽고 유연한 탐색을 제공하는 기술이 바로 라우팅(Routing) 입니다. ReactJS에서 라우팅의 중심은 React Router 라이브러리와 경로 매개변수(Path Parameters) 에 있습니다. 이 글에서는 ReactJS를 활용한 라우팅의 기본부터 실전 구현까지 자세히 알아보겠습니다. 초보자도 쉽게 따라할 수 있도록 예시 코드를 포함해 설명하겠습니다.

단일 페이지 애플리케이션(SPA)의 핵심: 라우팅

ReactJS는 단일 페이지 애플리케이션(SPA) 구축에 최적화된 JavaScript 라이브러리입니다. SPA란 서버에서 전체 페이지를 다시 로드하지 않고, 클라이언트 측에서 동적으로 콘텐츠를 업데이트하는 웹 앱을 의미합니다. 이는 페이지 전환 시 로딩 시간을 최소화하고, 사용자 상호작용을 더 빠르고 자연스럽게 만듭니다.

SPA의 핵심 기능 중 하나가 바로 라우팅입니다. 라우팅은 URL에 따라 다른 뷰나 컴포넌트를 표시하도록 하는 메커니즘으로, 사용자가 앱 내에서 자유롭게 이동할 수 있게 합니다. 예를 들어, 홈페이지에서 제품 상세 페이지로 이동할 때 전체 앱이 리로드되지 않고 부드럽게 전환되는 것이 라우팅의 마법입니다. ReactJS에서 이를 구현하려면 React Router가 필수입니다.

728x90

React Router: 라우팅의 강력한 파트너

React 애플리케이션에서 라우팅을 처리하는 데 가장 인기 있는 라이브러리가 React Router입니다. 이 라이브러리는 URL 경로를 관리하고, 탐색 기능을 쉽게 구현할 수 있는 다양한 컴포넌트와 훅을 제공합니다. React Router를 사용하면 복잡한 앱 구조도 간단히 처리할 수 있으며, SEO 최적화나 중첩 라우팅 같은 고급 기능도 지원합니다.

React Router의 주요 개념

React Router를 효과적으로 사용하기 위해 알아야 할 핵심 개념은 다음과 같습니다:

1. 경로(Routes): 앱 내 특정 컴포넌트나 뷰에 매핑되는 URL 패턴을 정의합니다. 예: /products 경로는 제품 목록 컴포넌트를 렌더링합니다.
2. 라우터(Router): 전체 앱의 라우팅을 감싸는 최상위 컴포넌트입니다. 웹 앱의 경우 BrowserRouter를 주로 사용하며, HTML5 History API를 통해 URL과 UI를 동기화합니다.
3. 링크(Link): HTML의 <a> 태그와 비슷하지만, 페이지 리로드 없이 탐색을 처리합니다. SPA의 부드러운 전환을 위해 필수적입니다.
4. Routes (구 Switch): 여러 Route 중 현재 URL과 일치하는 첫 번째 경로만 렌더링합니다. React Router v6부터 Switch가 Routes로 대체되었으며, 중복 매칭을 방지하는 역할을 합니다.

이 개념들을 바탕으로 라우팅을 설정하면, 앱이 더 직관적이고 확장 가능해집니다.

경로 매개변수: 동적 콘텐츠를 위한 필수 요소

현대 웹 앱은 정적 페이지만으로는 부족합니다. 사용자 맞춤형 콘텐츠나 데이터 기반 뷰가 필요하죠. 예를 들어, 전자상거래 사이트에서 수백 개의 제품을 각자 별도 페이지로 만들 수는 없습니다. 이때 경로 매개변수가 등장합니다.

경로 매개변수란?

경로 매개변수는 URL의 동적 부분으로, 변수처럼 정보를 전달합니다. :param 형식으로 정의되며, 사용자 입력이나 API 데이터에 따라 콘텐츠를 동적으로 렌더링합니다. 이는 코드 중복을 줄이고, 유지보수를 쉽게 만듭니다.

예를 들어, 제품 상세 페이지를 위해 /product/:id처럼 정의하면:

• /product/123 → ID 123 제품 표시
• /product/456 → ID 456 제품 표시

이렇게 하나의 라우트로 무한한 변수를 처리할 수 있습니다. React Router에서는 useParams() 훅으로 이 값을 쉽게 추출합니다.

React Router를 이용한 경로 매개변수 구현 예시

이제 실제로 구현해 보겠습니다. React Router v6를 기준으로 설명하며, 간단한 전자상거래 앱 예시를 사용합니다. (v5 사용자라면 Switch를 Routes로 교체하세요.)

1. React Router 설치

프로젝트 루트에서 다음 명령어를 실행합니다:

npm install react-router-dom

2. 기본 라우팅 설정

App.js에서 라우팅을 설정합니다. BrowserRouter로 앱을 감싸고, Routes 안에 Route를 배치합니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import ProductDetail from './ProductDetail';

const App = () => {
    return (
        <Router>
            <div className="App">
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/product/:id" element={<ProductDetail />} />
                </Routes>
            </div>
        </Router>
    );
};

export default App;

• path="/" : 홈 경로 (exact 매칭은 v6에서 기본 동작).
• path="/product/:id" : 동적 매개변수 :id 포함.

3. 구성 요소 생성

홈 구성 요소 (Home.js)

홈 페이지에서 제품 링크를 생성합니다. Link로 페이지 리로드 없이 이동합니다.

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <h1>저희 스토어에 오신 것을 환영합니다!</h1>
            <p>다양한 제품을 탐색해 보세요.</p>
            {/* 제품 ID를 포함한 링크 */}
            <Link to="/product/123">제품 123 보기</Link><br />
            <Link to="/product/456">제품 456 보기</Link><br />
            <Link to="/product/789">제품 789 보기</Link>
        </div>
    );
};

export default Home;

제품 상세 구성 요소 (ProductDetail.js)

useParams()로 :id를 추출하고, 이를 기반으로 가상의 제품 데이터를 표시합니다. 실제 앱에서는 API 호출로 대체하세요.

import React from 'react';
import { useParams, Link } from 'react-router-dom';

const ProductDetail = () => {
    // useParams 훅으로 경로 매개변수 추출
    const { id } = useParams();

    // 가상의 제품 데이터 (실제로는 API에서 가져옴)
    const products = {
        123: { name: '스마트폰', price: '999,000원', description: '최신 모델 스마트폰입니다.' },
        456: { name: '노트북', price: '1,500,000원', description: '고성능 게이밍 노트북입니다.' },
        789: { name: '헤드폰', price: '150,000원', description: '노이즈 캔슬링 헤드폰입니다.' }
    };

    const product = products[id] || { name: '제품 없음', price: 'N/A', description: '해당 ID의 제품을 찾을 수 없습니다.' };

    return (
        <div>
            <h2>{product.name} 상세 정보</h2>
            <p><strong>가격:</strong> {product.price}</p>
            <p><strong>설명:</strong> {product.description}</p>
            <Link to="/">홈으로 돌아가기</Link>
        </div>
    );
};

export default ProductDetail;

이 예시에서 /product/123으로 이동하면 ID 123 제품의 상세 정보가 동적으로 렌더링됩니다. Link로 홈으로 돌아갈 수도 있습니다.

추가 팁: 고급 기능 활용

• 중첩 라우팅: 제품 상세 페이지 안에 리뷰 섹션을 중첩하려면 <Outlet />을 사용하세요.
• 쿼리 매개변수: URL 쿼리(?sort=price)는 useSearchParams() 훅으로 처리합니다.
• 보호된 라우트: 인증이 필요한 페이지에는 Navigate 컴포넌트로 리다이렉트하세요.

이 구현으로 앱이 더 동적이고 사용자 친화적으로 변할 것입니다.

결론: 더 나은 웹을 위한 라우팅과 경로 매개변수

ReactJS에서 라우팅과 경로 매개변수를 마스터하면 웹 애플리케이션의 사용자 경험을 혁신할 수 있습니다. 전체 페이지 리로드 없이 원활한 전환을 제공함으로써, 사용자는 더 몰입감 있는 인터페이스를 즐길 수 있습니다. React Router 같은 도구를 활용하면 복잡한 탐색 구조도 체계적으로 관리할 수 있으며, 동적 콘텐츠 처리로 앱의 확장성을 높입니다.