React 라우터(Router) 설정하기

오늘은 React 라우터 설정하는 법에 대해서 알아보자~

라우터란 무엇일까?

라우트는 사용자가 특정 URL로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정하는 경로를 의미한다
한마디로 요약하자면 페이지 전환을 관리하는 역할을 담당한다!
 

React Router에서 라우트 사용법

React에서는 react-router-dom 라이브러리를 사용해서 라우팅을 구현한다.

다운로드

터미널 창을 켜서 다음과 같은 명령어를 입력해서 다운로드 받는다.

npm install react-router-dom

 
 

1. index.js

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

index.js 파일에 BrowserRouter를 import 받기!
 

2. App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";

 App.js 상단에 BrowserRouter, Route, Routes들을 import 받기!
 

 <BrowserRouter> //라우팅을 담당하는 최상위 컴포넌트
        <Routes> //여러 개의 Route를 감싸서 관리
          <Route path="/" element={<Test />}/>//path에 따라 어떤 컴포넌트를 렌더링할지 정의함
        </Routes>
      </BrowserRouter>

 
예를 들어서 Test 컴포넌트를 랜더링 시키고자 하면 App.js에서 Test를 import한 후 Route에서 해당 컴포넌트를 랜더링 시켜준다.

• 이때 path는 라우팅을 설정할 때 사용되는 URL이다. 
• element는 렌더링할 컴포넌트를 작성하면 된다.

 
만약 path를 /test로 지정을 하면 http://localhost:3000/test가 된다. 
따라서 http://localhost:3000/test에서 해당 컴포넌트(Test)를 확인할 수 있다.

---

라우터 VS 라우팅 VS 라우츠 

1. 라우터 (Router):
라우터는 URL 경로에 따라 적절한 컴포넌트를 렌더링하는 역할을 하는 도구다. React에서 React Router를 사용할 때 라우터는 BrowserRouter, HashRouter와 같은 컴포넌트를 의미한다.

import { BrowserRouter as Router } from 'react-router-dom';​

  위의 Router가 라우터 역할을 한다.

2. 라우팅 (Routing):
라우팅은 사용자가 요청한 URL에 따라 어떤 페이지를 보여줄지 결정하는 과정이다.
웹 애플리케이션에서 URL을 관리하고 그에 맞는 컴포넌트를 표시하는 작업!!
ex) 사용자가 /about URL을 요청하면, About 컴포넌트가 보여지는 것이 라우팅이다.

3. 라우츠 (Routes):
정의: Routes는 여러 개의 Route를 감싸는 컴포넌트다.
Routes 컴포넌트는 그 내부에 여러 개의 Route를 넣을 수 있게 해준다.