[React] - Router

📌 라우팅이란?

Routing은 네트워크에서 데이터 패킷이 출발지에서 목적지로 전송되는 경로를 결정하는 과정을 말한다. 쉽게 말해 데이터가 네트워크 상에서 어떤 경로를 통해 이동할지를 결정하는 것인데, 이를 가능하게 해주는 장비 중 하나가 바로 Router이다. 라우팅은 크게 정적 라우팅(수동으로 설정한 경로)과 동적 라우팅(네트워크에서 자동으로 경로를 학습하고 조정)으로 나뉜다.

📌 리액트에서의 라우팅은?

리액트에서 라우팅은 단일 페이지 어플리케이션(Single Page Application, SPA)에서 여러 페이지를 관리하기 위한 방법이다. SPA는 초기에 모든 페이지를 로드하고, 사용자가 다른 페이지로 이동할 때마다 페이지 전체를 새로 로드하지 않고 필요한 부분만 업데이트하여 빠른 사용자 경험을 제공하는데, 이때 라우팅이 사용된다. 리액트에서 주로 사용하는 라우팅 라이브러리 중 하나가 바로 React Router이다.
React Router는 컴포넌트를 기반으로 라우팅을 하며, SPA에서 매번 새로고침하지 않고 각각의 URL에 따라 선택된 페이지를 렌더링한다.

<설치>

npm install react-router-dom

한 뒤에 index.js 파일의 App을 BrowserRouter로 감싸주면 된다.

<import>

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

❗️ 라우터를 이용하여 홈페이지의 상세 페이지들을 만들어보자.

Routes 컴포넌트 생성하기

- 이 컴포넌트는 여러 Route들을 감싸고, 그들 중 특정 Route를 렌더링하는 역할을 한다.  
- 라우팅하려면 생성한 내용을 `<Routes></Routes>` 태그로 감싸주어야 한다.

/* App.js */
import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>상세 페이지</div> } />
      <Route path="/about" element={ <div>어바웃 페이지</div> } />
    </Routes>
  )
}

Route 컴포넌트

• Route 컴포넌트의 path 속성은 URL 경로 & 해당 URL 경로에 매핑될 컴포넌트를 결정한다.

  <정적 경로 매칭>
  <Route path="/home" component={Home} />
  : /home 경로에 대해 Home 컴포넌트를 매칭한다. 사용자가 /home 경로로 이동하면 Home 컴포넌트가 렌더링된다.

  <동적 경로 매칭>
  : 경로에 동적인 부분이 있을 경우, 콜론(:)을 사용하여 매개변수를 정의할 수 있다.
  <Route path="/users/:id" component={UserProfile} />
  : /users/1, /users/2, /users/abc 등의 경로는 모두 UserProfile 컴포넌트와 매칭된다.

• Route 컴포넌트의 element 속성은 해당 경로에 매칭될 때 렌더링될 React 엘리먼트를 지정한다. component 속성은 컴포넌트 클래스를 직접 전달하는 반면, element 속성은 JSX 엘리먼트를 직접 전달한다.

{/* nested Routes */}
<Route path='/event' element={<Event />}>
  	<Route path='one' element={<div><p>첫 주문시 양배추즙 서비스</p></div>}></Route>
	<Route path='two' element={<div><p>생일기념 쿠폰받기</p></div>}></Route>
</Route>

Link, 페이지를 이동하고 싶을 때

유저들은 페이지를 이동할 때 url을 직접 치지 않고 링크를 통해 이동한다. 이러한 링크를 만들 때 쓰이는 것이 바로 react-router-dom의 Link 컴포넌트이다.

/* App.js */
import Link from 'react-router-dom'

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

-> 이런 식으로 url 경로로 이동하는 링크를 생성할 수 있다.