React Router

React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.

1. React Router 사용방법

React Router를 사용하기 위해서는 라이브러리를 설치하고 해당 컴포넌트를 import 해야한다.

라이브러리 설치 방법

npm install react-router-dom

컴포넌트 import

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

다음과 같이 해당 컴포넌트를 {}안에 넣어서 import 시켜주면 된다.

2. 라우팅(Routing)

다른 주소에 따라 다른 화면을 보여주는 과정을 라우팅이라고 한다.

3. React Router 주요 컴포넌트

React Router 주요 컴포넌트로는 라우터(Router)역할을 하는 BrowserRouter와 경로를 매칭(Route Matchers)해주는 Switch와 Route 경로를 변경(Route Changers)하는 역할을 하는 Link가 존재한다.

BrowserRouter

페이지를 새로고침 하지 않아도 주소를 변경할 수 있는 역할을 하는 컴포넌트

BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다.

Switch

여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 하는 컴포넌트

Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

Route

path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정하는 역할을 하는 컴포넌트

Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.

Route에서는 path속성으로 경로를 지정해줄 수 있으며 path 앞에 exact 속성을 주면 주어진 경로와 정확히 일치해야만 설정한 Route컴포넌트를 보여준다.

Link

경로를 연결해주는 역할을 하는 컴포넌트

페이지 전환을 통해 페이지를 새로 불러오지 않고 페이지의 주소만 변경한다.

Link의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결해준다.