라우트 설정 및 네비게이션

React 라우팅 설정 및 네비게이션: 심층 가이드

서론

React 애플리케이션에서 다양한 페이지를 구성하고 사용자들이 원하는 페이지로 자유롭게 이동할 수 있도록 하는 것은 매우 중요합니다. 이를 위해 React는 라우팅 시스템을 제공하며, React Router 라는 라이브러리가 대표적으로 사용됩니다. 이 글에서는 React Router를 중심으로 라우팅 설정과 네비게이션에 대해 심층적으로 다뤄보겠습니다.

라우팅이란 무엇인가?

라우팅(Routing)은 웹 애플리케이션에서 사용자가 특정 URL을 입력하거나 링크를 클릭했을 때, 해당 URL에 맞는 컴포넌트를 화면에 렌더링하는 과정입니다. 마치 웹 서버가 정적인 HTML 파일을 제공하는 것처럼, React 애플리케이션에서도 사용자의 요청에 따라 동적인 컴포넌트를 보여줄 수 있도록 하는 것이죠.

React Router 소개

React Router는 React 애플리라는에서 라우팅을 구현하기 위한 가장 인기 있는 라이브러리입니다. 다음과 같은 주요 기능을 제공합니다.

• URL과 컴포넌트 매핑: URL 패턴과 컴포넌트를 연결하여, 특정 URL에 접속하면 해당 컴포넌트가 렌더링되도록 설정합니다.
• 프로그래밍 방식 네비게이션: JavaScript 코드를 통해 프로그램적으로 페이지를 이동할 수 있습니다.
• 브라우저 히스토리 관리: 브라우저의 뒤로 가기/앞으로 가기 버튼을 사용하여 이전/다음 페이지로 이동할 수 있도록 지원합니다.
• 네스티드 라우트: 라우트를 중첩하여 복잡한 애플리케이션 구조를 구현할 수 있습니다.

728x90

기본적인 라우팅 설정

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

 

• BrowserRouter: 라우팅 기능을 위한 최상위 컴포넌트입니다.  
   
• Routes: 여러 개의 Route 컴포넌트를 감싸는 컨테이너입니다.
• Route: 특정 URL 패턴과 컴포넌트를 매핑합니다.
  • path: 매핑할 URL 패턴
  • element: 렌더링할 컴포넌트

프로그래밍 방식 네비게이션

import { useNavigate } from 'react-router-dom';

function MyButton() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/about')}>About 페이지로 이동</button>
  );
}

 

• useNavigate: 프로그래밍 방식으로 페이지를 이동하기 위한 Hook입니다.

네스티드 라우트

<Routes>
  <Route path="/" element={<Home />}>
    <Route path="users" element={<Users />}>
      <Route path=":userId" element={<UserDetail />} />
    </Route>
  </Route>
</Routes>

• :userId는 동적 파라미터로, 해당 값에 따라 다른 컴포넌트를 렌더링할 수 있습니다.

더 나아가: Params, Query Parameters, Wildcard Routes

• Params: URL에서 특정 값을 추출하여 사용할 수 있습니다.
• Query Parameters: URL 뒤에 ?를 붙여 추가적인 정보를 전달할 수 있습니다.
• Wildcard Routes: 모든 URL 패턴에 일치하는 라우트를 만들 수 있습니다.

추가적인 기능

• Link 컴포넌트: <Link> 컴포넌트를 사용하면 더욱 간편하게 링크를 생성할 수 있습니다.
• Outlet 컴포넌트: 네스티드 라우트에서 자식 라우트를 렌더링하는 데 사용됩니다.
• useParams, useLocation, useNavigate: 라우팅 정보를 가져오거나 URL을 조작하는 데 사용하는 Hook들입니다.

결론

React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 강력한 도구입니다. 이 글에서는 기본적인 라우팅 설정부터 프로그래밍 방식 네비게이션, 네스티드 라우트까지 다양한 기능을 살펴보았습니다. React Router를 능숙하게 활용하면 복잡한 단일 페이지 애플리케이션을 구축할 수 있습니다.