리액트는 웹 애플리케이션을 개발하기 위한 자바스크립트 라이브러리로, 단일 페이지 애플리케이션(SPA)을 만들 수 있도록 도와줍니다. 리액트 라우터(React Router)는 이러한 리액트 앱에서 라우팅 기능을 제공하여 사용자가 다른 페이지로 이동할 수 있는 기능을 구현하는데 도움을 줍니다. 이번에는 자바스크립트 리액트 라우터의 주요 기능들에 대해 알아보겠습니다.

1. 라우팅

라우팅은 웹 애플리케이션에서 사용자 요청에 따라 적절한 페이지를 보여주는 것을 말합니다. 리액트 라우터는 브라우저의 주소창 URL에 따라 다른 컴포넌트를 렌더링하게 해줍니다. 예를 들어, 사용자가 “/about”으로 이동하고 싶다면, 이에 해당하는 컴포넌트를 보여줄 수 있습니다.

2. 라우트 설정

리액트 라우터는 Route 컴포넌트를 사용하여 각 경로에 맞는 컴포넌트를 연결합니다. 예를 들어, 아래와 같은 코드로 “/about” 경로에 About 컴포넌트를 매핑할 수 있습니다.

import { Route } from 'react-router-dom';
import About from './About';

<Route path="/about" component={About} />

3. 중첩된 라우트

리액트 라우터는 중첩된 구조를 통해 다양한 라우팅을 구현할 수 있습니다. 예를 들어, /about 경로에 있는 About 컴포넌트 안에서 /about/team에 해당하는 Team 컴포넌트를 렌더링하고 싶다면, 아래와 같은 코드로 중첩된 라우트를 설정할 수 있습니다.

<Route path="/about" component={About}>
  <Route path="/about/team" component={Team} />
</Route>

4. 링크 생성

리액트 라우터는 링크를 생성하기 위한 Link 컴포넌트를 제공합니다. Link 컴포넌트를 사용하면 다른 페이지로 이동하는 링크를 생성할 수 있습니다. 예를 들어, /about으로 이동하는 링크를 생성하려면 아래와 같은 코드를 사용할 수 있습니다.

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

<Link to="/about">About 페이지로 이동</Link>

5. 리다이렉트

리액트 라우터는 리다이렉트 기능도 제공합니다. 사용자를 다른 경로로 리다이렉트하고 싶을 때 Redirect 컴포넌트를 사용할 수 있습니다. 예를 들어, / 경로로 접속했을 때 자동으로 /home으로 리다이렉트하려면 아래와 같은 코드를 사용할 수 있습니다.

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

<Route exact path="/">
  <Redirect to="/home" />
</Route>

결론

리액트 라우터는 웹 애플리케이션에서 라우팅 기능을 구현하기 위한 강력한 도구입니다. 라우터를 통해 사용자가 원하는 페이지로 이동할 수 있으며, 중첩된 라우트나 링크 생성 및 리다이렉트 등 다양한 기능을 제공합니다. 이를 통해 보다 유연하고 사용자 친화적인 웹 애플리케이션을 개발할 수 있습니다.