React • WOOYIT 테크 블로그

1. React Router 설치

먼저, 프로젝트에 react-router-dom 패키지를 설치해야 합니다.

이 패키지는 웹 어플리케이션을 위한 react-router의 버전입니다. npm을 사용하면 다음과 같이 설치할 수 있습니다.

npm install react-router-dom

2. React-router-dom 구성 요소 불러오기

라이브러리를 설치한 후에는, react-router-dom에서 필요한 구성 요소를 가져와야 합니다. 이를 위해 index.js 또는 app.js 파일에서 다음 코드를 작성해야 합니다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

3. Router 설정

BrowserRouter는 HTML5의 history API를 사용하여 UI를 URL과 동기화하는 라우터입니다. React 컴포넌트를 BrowserRouter 컴포넌트로 감싸면 라우팅이 활성화됩니다.

<Router>
  <App />
</Router>

4. 경로 정의

Switch 컴포넌트 내에서 Route 컴포넌트를 사용하여 경로를 정의합니다.

여기서 Switch 컴포넌트는 여러 Route 중 하나를 렌더링하는 역할을 합니다.

URL과 일치하는 첫 번째 Route 또는 Redirect 자식을 렌더링합니다. 이는 여러 경로가 일치하는 경우 첫 번째 경로만 렌더링하도록 보장합니다.

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route component={NotFound} />
</Switch>

5. 컴포넌트 생성

각 경로에 대해 표시할 컴포넌트를 정의해야 합니다. Home.js, About.js, Contact.js, NotFound.js 등의 컴포넌트를 생성하면 됩니다.

추가적인 개념: 파라미터와 쿼리

react router에서는 URL의 일부를 변수로 사용할 수 있습니다. 이를 통해 동적 라우팅을 구현할 수 있습니다. 예를 들어, /users/:id 경로를 정의하면, /users/1, /users/2 등 다양한 URL에서 동일한 컴포넌트를 렌더링하고, :id 부분은 파라미터로서 접근할 수 있습니다.

URL에 정보를 담는 또 다른 방법은 쿼리 파라미터를 사용하는 것입니다. 쿼리는 ? 다음에 나오며, &로 여러 개의 쿼리를 연결할 수 있습니다. 예를 들어, /search?query=react와 같이 사용됩니다.

결론

react-router는 React 웹 애플리케이션에서 라우팅을 관리하기 위한 라이브러리입니다.

이를 사용하면 사용자의 현재 위치에 따라 다른 컴포넌트를 렌더링하고, 특정 URL에서 특정 컴포넌트를 렌더링하는 등의 작업을 할 수 있습니다.

본 포스트에서는 react-router의 기본적인 사용법을 소개하고, 설치부터 라우팅 설정까지의 과정을 설명했습니다. 이를 통해 React에서의 라우팅 설정에 대한 이해를 돕고자 했습니다. 이상입니다.

[react router 추가 설명 문서]

[wooyung’s IT 블로그]

[2023] React Router: 라우팅 설정하기

목차