[javascript] 리액트 라우터의 사용 예시와 실제 프로젝트 적용 사례

04 Dec 2023

javascript

리액트 라우터(React Router)는 리액트 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리입니다. 이를 통해 애플리케이션의 상태와 URL을 동기화시킬 수 있으며, 다양한 라우팅 기능을 제공합니다. 이번 포스트에서는 리액트 라우터의 기본 사용법과 실제 프로젝트에서의 적용 사례를 살펴보겠습니다.

설치

리액트 라우터를 사용하기 위해선 먼저 패키지를 설치해야 합니다. npm을 사용한다면 다음 명령어로 리액트 라우터 패키지를 설치할 수 있습니다.

npm install react-router-dom

기본 사용법

리액트 라우터의 가장 기본적인 사용법은 <BrowserRouter> 컴포넌트를 사용하여 라우팅을 정의하는 것입니다. 예를 들어, 아래와 같은 구조의 애플리케이션을 가정해봅시다.

src/
  components/
    Home.js
    About.js
  App.js
  index.js

Home.js와 About.js는 각각 홈 페이지와 소개 페이지를 정의한 컴포넌트입니다. App.js는 페이지를 라우팅하는 역할을 하는 라우터 컴포넌트입니다.

// App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

위 코드에서는 <BrowserRouter> 컴포넌트로 애플리케이션 전체를 감싸고, <Switch> 컴포넌트 안에 <Route> 컴포넌트를 사용하여 각 페이지를 정의했습니다. exact prop을 사용하여 정확한 경로와 매칭되어야만 해당 컴포넌트가 렌더링되도록 했습니다.

실제 프로젝트 적용 사례

리액트 라우터는 다양한 프로젝트에서 사용되고 있습니다. 예를 들어, 전자상거래 애플리케이션에서는 다음과 같이 리액트 라우터를 사용할 수 있습니다.

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import ProductList from './components/ProductList';
import ProductDetail from './components/ProductDetail';
import Cart from './components/Cart';
import NotFound from './components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/products" component={ProductList} />
        <Route exact path="/products/:id" component={ProductDetail} />
        <Route exact path="/cart" component={Cart} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

위 코드에서는 /products 경로에 /products/:id와 같은 동적인 경로도 정의되어 있습니다. 사용자가 특정 상품을 클릭하면 해당 상품의 상세 정보를 보여주는 페이지로 이동합니다. 또한, /cart 경로는 사용자의 장바구니 페이지를 나타냅니다. 없는 경로로 접근하는 경우에는 NotFound 컴포넌트가 렌더링됩니다.

결론

이번 포스트에서는 리액트 라우터의 기본적인 사용법과 실제 프로젝트에서의 적용 사례에 대해 살펴보았습니다. 리액트 라우터는 클라이언트 사이드 라우팅을 구현하는 데 유용한 도구이며, 다양한 프로젝트에서 활용될 수 있습니다.

만약 자세한 내용을 알고 싶다면 공식 문서¹를 참고하시기 바랍니다.

React Router, “Official Documentation”, https://reactrouter.com/ ↩