React 라우팅(Routing) 설정하기

React 라우팅(Routing) 설정하기

웹 애플리케이션에서 사용자가 효과적으로 내비게이션을 할 수 있도록 돕는 ‘라우팅’은 매우 중요한 요소입니다. 특히, React와 같은 프론트엔드 라이브러리에서는 라우팅을 통해 다양한 페이지를 동적으로 관리할 수 있습니다. 본 글에서는 React Router를 사용한 라우팅 설정 방법에 대해 상세히 알아보겠습니다.

라우팅의 기본 개념

라우팅이란, 사용자가 특정 URL 경로로 요청을 보낼 때 이에 맞는 화면을 렌더링하는 기능을 의미합니다. 이를 통해 웹사이트는 하나의 애플리케이션 내에서 서로 다른 페이지를 탐색할 수 있게 됩니다. 사용자가 어떤 경로를 요청하면 해당 경로와 연결된 컴포넌트가 화면에 표시되며, 이는 URL이 변경될 때마다 새로운 콘텐츠가 로드된다는 것을 의미합니다. 이처럼 클라이언트 사이드에서 라우팅을 처리하면 사용자 경험을 크게 개선할 수 있습니다.

SPA와 React Router의 필요성

전통적인 방식의 웹 애플리케이션(MPA, Multi-Page Application)에서는 사용자가 페이지를 이동할 때마다 서버에 새로운 HTML 파일을 요청하고 새로운 페이지를 로드하는 방식이었습니다. 이 경우 매번 전체 페이지가 새로 로드되기 때문에 사용자 경험이 단절될 수 있습니다. 반면, SPA(Single Page Application)는 처음 로딩된 페이지 이후에는 JavaScript를 통해 URL 및 콘텐츠를 동적으로 바꿀 수 있는 장점을 가지고 있습니다.

React Router는 이러한 SPA에서 라우팅을 관리하는 데 유용한 라이브러리입니다. 해당 라이브러리를 활용하면 URL에 따라 다르게 구성된 컴포넌트를 로드할 수 있습니다.

React Router 설치

React 애플리케이션에서 라우팅 기능을 사용하기 위해서는 먼저 React Router를 설치해야 합니다. 다음과 같은 명령어를 통해 설치할 수 있습니다:

npm install react-router-dom@5

설치가 완료되면, 프로젝트의 구성 요소에서 React Router의 기능을 활용할 수 있습니다.

라우팅 설정하기

라우팅 설정의 첫 번째 단계는 각 페이지에 해당하는 컴포넌트를 만드는 것입니다. 예를 들어, About 페이지를 만들고 이를 Route 컴포넌트로 감싸야 합니다. 코드 예시는 다음과 같습니다:

import { Route } from "react-router-dom";
import About from "./pages/About";
function App() {
 return (
  

   
  
 );
}

위 코드에서 Route는 URL 경로와 일치할 때 해당 컴포넌트를 렌더링합니다. 만약 URL이 ‘/about’과 일치하지 않는다면, About 컴포넌트는 표시되지 않습니다.

BrowserRouter 컴포넌트 사용하기

React Router의 라우팅 기능을 완전히 활용하기 위해서는 BrowserRouter 컴포넌트를 사용하여 앱을 감싸야 합니다. 이는 index.js 파일에서 설정할 수 있습니다:

import { BrowserRouter } from "react-router-dom";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
 
  
 
);

BrowserRouter로 감싸주면 URL 경로에 따라 알맞은 컴포넌트를 렌더링할 수 있게 됩니다.

컴포넌트 중첩과 라우팅

React Router는 중첩된 라우팅도 지원합니다. 중첩 라우팅을 통해 애플리케이션 내에서 더 세분화된 구조를 만들 수 있습니다. 자식 컴포넌트를 정의하고 Outlet을 사용하여 부모 컴포넌트 내에 자식 컴포넌트가 표시되도록 설정할 수 있습니다.

import { Outlet } from 'react-router-dom';
function App() {
 return (
  

   

라우팅 예제
   
  
 );
}

오류 처리 및 NotFound 페이지

웹 애플리케이션에 있어 사용자가 잘못된 경로로 접근했을 때 적절한 오류 처리가 중요합니다. NotFound 컴포넌트를 만들어 잘못된 경로에 대한 사용자 피드백을 제공할 수 있습니다:

const NotFound = () => {
 return 
페이지를 찾을 수 없습니다.
;
};
const router = createBrowserRouter([
 {
  path: '/',
  element: ,
  errorElement: ,
 },
]);

동적 라우팅 구현하기

동적 라우팅은 URL의 일부로 변수를 사용할 수 있는 기능입니다. 예를 들어, 제품 상세 페이지가 필요하다면 다음과 같이 정의할 수 있습니다:

이 경우, 사용자가 특정 제품의 상세 페이지를 요청하면 해당 제품 ID에 맞는 정보를 동적으로 로드할 수 있습니다.

실제 사용 사례

리액트 라우터를 활용하여 간단한 네비게이션을 구현해보겠습니다. 아래의 코드는 기본적인 라우팅 구조를 설정하는 예시입니다:

 
 
  } />
  } />
 

이 코드를 통해 사용자가 네비게이션 링크를 클릭할 때, 해당 경로에 맞는 컴포넌트를 로드할 수 있습니다.

결론

React에서의 라우팅 설정은 사용자 경험을 개선하는 데 필수적인 요소입니다. React Router를 활용하면 SPA에서 동적으로 페이지를 관리할 수 있으며, 복잡한 네비게이션 구조 구축이 가능합니다. 이 글을 통해 기본적인 라우팅 설정 방법을 익히고, 다양한 기능을 활용하여 보다 완성도 있는 웹 애플리케이션을 개발해보시기 바랍니다.

질문 FAQ