웹 어플리케이션을 개발하다 보면 페이지 간의 이동은 필수적입니다. 그러나 전통적인 HTML 페이지처럼 새로 로드되는 것이 아니라 SPA(Single Page Application)에서 자연스러운 사용자 경험을 제공하는 방식이 필요합니다. 여기서 React Router가 등장합니다. React Router는 React 애플리케이션에서 라우팅 관리를 위한 표준 라이브러리로, 클라이언트 사이드에서 URL을 관리하여 다양한 페이지를 제공할 수 있도록 도와줍니다.
React Router 기본 개념
React Router는 ‘라우팅’에 대한 두 가지 주요 개념은 Route와 Link입니다. 이 두가지 개념을 잘 이해하는 것이 React Router를 효과적으로 사용하는 첫걸음입니다.
1. Route
Route는 특정 URL과 컴포넌트를 연결하는 역할을 합니다. 특정 URL이 요청될 때 해당 URL에 설정된 컴포넌트가 렌더링됩니다. 이 때, React Router는 각 Route를 검사하여 어떤 컴포넌트를 보여줘야 할지 결정합니다.
2. Link
Link는 사용자가 인터랙션을 통해 다른 페이지로 이동할 수 있도록 하는 컴포넌트입니다. 전통적인 앵커 태그(<a>)와 유사하지만, 클라이언트 사이드 라우팅을 통해 페이지를 새로 고치지 않고 즉시 다른 컴포넌트를 표시합니다.
React Router 설치 및 설정
먼저 React Router 패키지를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 React Router를 설치합니다:
npm install react-router-dom설치가 완료되면, 애플리케이션에서 React Router를 사용하여 라우팅을 설정할 수 있습니다. 다음은 기본적인 라우팅 설정 예제입니다:
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
// 페이지 컴포넌트들
const Home = () => 홈 페이지
;
const About = () => 소개 페이지
;
const Contact = () => 연락처 페이지
;
const App = () => {
return (
);
};
export default App;설명:
- BrowserRouter: 라우터를 정의하는 최상위 컴포넌트입니다. 이 컴포넌트는 애플리케이션의 모든 라우팅을 관리합니다.
- Route: URL에 따라 해당 컴포넌트를 렌더링합니다.
path속성은 URL을,component속성은 렌더링할 컴포넌트를 정의합니다. - Switch: 자식 Route 중 하나만 렌더링하게 하는 컴포넌트입니다. 가장 먼저 일치하는 Route만 렌더링합니다.
- Link: 사용자가 다른 페이지로 이동할 수 있도록 하는 내비게이션 링크입니다.
동적 라우팅
React Router는 정적 라우팅 외에도 동적 라우팅을 지원합니다. 동적 라우팅을 사용하면 URL의 일부를 변수로 지정할 수 있습니다. 다음은 동적 라우팅을 적용한 간단한 예제입니다:
const User = ({ match }) => {
return 사용자 ID: {match.params.id}
;
};
const App = () => {
return (
);
};설명:
위 코드에서 User 컴포넌트는 URL에서 ID를 받아와 사용자 ID를 표시합니다. match.params는 URL의 파라미터를 접근할 수 있게 도와줍니다.
Nested Routes (중첩 라우팅)
React Router는 중첩 라우팅도 지원하여 더 복잡한 구조를 만들 수 있습니다. 예를 들어, 특정 페이지에 서브 페이지가 있는 경우입니다:
const Dashboard = () => (
대시보드
);
const UserProfile = () => (
사용자 프로필
);
const App = () => {
return (
);
};설명:
동일한 경로에서 효율적으로 서브 라우팅을 관리할 수 있습니다. 이처럼 중첩된 Route를 활용하면 더 세밀하고 구조화된 페이지 전환이 가능합니다.
Redirecting (리다이렉션)
특정 경로에서 다른 경로로 리다이렉션이 필요할 때 Redirect 컴포넌트를 사용할 수 있습니다. 아래 예제를 참고하세요:
import { Redirect } from 'react-router-dom';
const App = () => {
return (
);
};설명:
위 코드에서 사용자가 /old-path로 접근할 경우, 사용자는 자동으로 /new-path로 리다이렉션됩니다.
쿼리 파라미터 활용하기
React Router에서는 URL에서 쿼리 파라미터를 쉽게 사용할 수 있습니다. useLocation 후크를 사용하여 현재 URL의 쿼리 파라미터를 가져올 수 있습니다:
import { useLocation } from 'react-router-dom';
const QueryComponent = () => {
const query = new URLSearchParams(useLocation().search);
const id = query.get('id'); // URL에서 id 쿼리 파라미터를 가져옵니다.
return 쿼리 파라미터 ID: {id}
;
};설명:
위 예시에서는 URL의 쿼리 파라미터를 통해 데이터를 가져와서 사용할 수 있게 도와줍니다. 이 방법을 통해 더욱 동적인 페이지를 만들 수 있습니다.
마치며
React Router는 리액트 애플리케이션에서 페이지 이동을 관리하는 데 필수적인 도구입니다. 본 글에서는 React Router의 주요 개념들, 라우팅 설정, 동적 라우팅, 중첩 라우팅, 리다이렉션 및 쿼리 파라미터 활용에 대해 알아보았습니다. 이 기반 지식을 바탕으로 더 복잡하고 유용한 사용자 경험을 제공하는 웹 애플리케이션을 구축할 수 있게 될 것입니다.
React를 통한 웹 개발을 계속하며 다양한 기능을 실험해보세요! Happy Coding!