React Router

Routing ?

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL 에 따라 알맞은 페이지를 보여주는 것을 의미한다.

우리가 웹 애플리케이션을 만들때 프로젝트 하나의 페이지로 구성할 수도 있고, 여러 페이지를 구성할 수도 있다.

만약 하나의 페이지로 충분하다면 좋겠지만, 목적에 따라 여러개의 페이지가 필요해진다.

그런 상황에서 여러 페이지를 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트를 분리해가면서 프로젝트를 관리하기 위해서 필요한 것이 라우팅이다.

React를 사용하며 라우팅을 구현하기 위해 사용할 수 있는 선택지는 두 가지 존재한다.

1. React Router

라이브러리 이며 리액트의 라우팅 관련 라이브러리중 가장 오래됐으며, 가장 많이 사용되고 있다.

컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다.

1. Next.js

리액트에서 확장된 버전의 프레임 워크이다.

이 프레임 워크는 리액트 라우터의 대안으로 많이 사용된다고 한다.

이 글에서 다룰 내용은 React Router 를 다룰 예정이며, 라우팅 관련 기능은 리액트 라이브러리에서 공식적으로 지원되는 사항이 아니고, 써드 파티로서 제공이 된다.

리액트 라우터를 사용하면 손쉽게 SPA 를 만들 수 있다.

---

Install React Router

공식적으로 지원되는 사항이 아닌 , 써드 파티로서 제공이 되기에 우선 설치를 진행해줘야 한다.

터미널을 이용하여 react 프로젝트의 경로의 디렉토리로 이동한 뒤

> npm install react-router-dom

or

> yarn add react-router-dom

내가 프로젝트를 진행할 디렉토리에서 설치를 진행해주면 된다.

---

Using React Router

<BrowserRouter>

- `<Link>` 태그로 적어주며 `to` 속성을 통해 이동할 경로를 추가하여 이동한다.
- `HTML5 History API` 를 사용한다.
- 주로 동적인 페이지에서 사용된다.

BrowserRouter 컴포넌트를 이용하여 최상위 컴포넌트로 감싸주기

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

ReactDOM.render (
	<BrowserRouter>
		<App />
	<BrowserRouter>
	document.getElementById('root')
)

React Router 의 기능을 사용하기 위해 애플리케이션의 최상위 컴포넌트로 감싸는 역활을 한다.

---

• Routes 컴포넌트

<Routes> 컴포넌트는 여러 Route 를 감싸서 그 중에서 해당되는 Route 를 렌더링 해주는 역활이다.

<BrowserRouter>
	<Routes>
		<Route path='/main' element={<Main/>} />
	<Routes>
</BrowserRouter>

---

• Route 컴포넌트

<Route> 컴포넌트는 path 속성에는 페이지 경로를 element 속성에는 보여주고 싶은 컴포넌트를 넣어주면 된다.

<BrowserRouter>
	<Routes>
      <Route path='/' element={<Layout />} >
        <Route index element={<Main />} />
        <Route path='/pageA' element={<PageA />} />
        <Route path='/pageB' element={<PageB />} />
        <Route path='/pageC' element={<PageC />} />
      </Route>
  </Routes> 
</BrowserRouter>

---

• <Link> 컴포넌트

html 페이지에서는 링크를 넣어줄 때 a 태그를 사용하지만,

리액트 라우터를 사용하는 프로젝트에서는 a 태그를 바로 사용하면 안된다.

그 이유는 a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문이다.

따라서 <Link> 컴포넌트를 사용하게 되면 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고

History API를 통해 브라우저의 주소의 경로만 바꾸는 기능이 내장되어 있다.

<Link to='/pageA'>Page A</Link>

---