React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 웹 애플리케이션을 개발하는 데 널리 사용됩니다. React를 사용하여 싱글 페이지 애플리케이션(SPA)을 구축하는 경우, 페이지 간 전환을 위한 라우팅이 필수적입니다. React에서 라우팅을 어떻게 처리하는지 살펴봅시다.

React 라우팅 라이브러리

React에서 라우팅을 구현하기 위해 가장 많이 사용되는 라이브러리는 React Router입니다. React Router는 React 애플리케이션에서 라우팅 및 네비게이션을 관리할 수 있는 강력한 도구입니다.

React Router 기본 사용법

React Router를 사용하여 기본적인 라우팅을 설정하는 방법을 살펴보겠습니다.

설치

먼저, React Router를 설치해야 합니다.

npm install react-router-dom

라우터 설정

라우터를 설정하기 위해 BrowserRouter를 사용합니다.

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

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

export default App;

위의 코드에서 / 경로는 Home 컴포넌트를, /about 경로는 About 컴포넌트를 렌더링하도록 설정되어 있습니다.

마치며

React에서 라우팅을 구현하는 방법을 살펴보았습니다. React Router를 사용하면 간편하게 SPA의 라우팅을 구현할 수 있으며, 복잡한 애플리케이션에서도 효과적으로 사용할 수 있습니다. React 개발 시 라우팅은 중요한 부분이므로, React Router에 대해 더 알아보시기를 권장합니다.

참고문헌:

• React Router 공식 문서
• React Router GitHub 저장소