[React] React Router : Router, Link

Routing

라우팅이란, URL에 따라 그에 상응하는 화면을 전송해주는 것을 말한다. 쉽게 말해, 링크를 입력하면 그 링크로 이동시켜주는 역할을 한다.

라우팅은 SPA(Single Page Application)를 구현하는 데 필수적이며, SPA는 초기 로딩 시에 서버에서 모든 컨텐츠를 불러오는 것이 아닌 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요하다.

리액트에서는 라우팅 기능을 사용하기 위해 react-router 라이브러리를 따로 설치해줘야 한다. 

SPA(Single Page Application)이란?

SPA는 단일 페이지 어플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미한다. 사용자가 어플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있다.

 

React Router

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

 

- BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지한다.

- HashRouter: 해시 주소를 감지한다.

 

react-router 사용법

react-router를 사용하기 위해 우선 npm 을 사용해 설치를 해준다.

npm i react-router-dom



완료되면 App.js에서 import 문에 다음을 추가한다.

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

 

 

각 구성요소에 대해 설명하자면, 

• BrowserRouter: history API를 사용해 URL과 UI를 동기화하는 라우터이다.
• Route: 컴포넌트의 속성에 설정된 URL과 함께 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다. 예를 들어, 특정 URL 경로에 대한 라우트를 정의하고 해당 경로로 이동할 때 렌더링할 컴포넌트를 설정할 수 있다.
• Link: a 태그와 비슷하며, to 속성에 설정된 링크로 이동한다. 기록이 history에 저장되며, 보통 네비게이션 메뉴나 버튼에서 주로 사용된다.
• Switch: 여러 <Route> 컴포넌트를 감싸는 컨테이너 역할을 하며, <Switch> 내부의 첫 번째 일치하는 <Route>만 렌더링하고 나머지는 무시한다. 자식 컴포넌트 Route 또는 Redirect 중 매치되는 첫 번째 요소를 렌더링한다. 

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/Detail" element={<Detail/>}>
            <Route path=":cardId" element={<DetailCard />} />
          </Route>
        </Routes>
    </BrowserRouter>
  );
};

• 각 Route 컴포넌트는 특정 URL 경로에 대응하는 컴포넌트를 지정하며, 예시에서 첫번째 Route 컴포넌트는 "/" 경로에 대응하며, Home 컴포넌트를 렌더링한다. 두번째 Route 컴포넌트는 "/Detail" 경로에 대응하며, Detail 컴포넌트를 렌더링한다. 세번째 Route 컴포넌트는 "/Detail/:cardId" 경로에 대응하며, DetailCard 컴포넌트를 렌더링한다. cardId는 동적 세그먼트로, URL의 일부분을 변수로 취급하여 다양한 cardId 값에 대응한다. 

 

import React from 'react';
import {Link} from 'react-router-dom';

function Nav(){
  return (
    <div>
      <Link to='/'> Home </Link>
      <Link to='/about'> About </Link>
    </div>
  );
}

export default Nav;

• react-router을 사용할 때 a 태그 대신 예시와 같이 Link 컴포넌트를 사용한다.