Re: 라우팅이란?

[ParkYK]

☞ 라우팅이란?

 - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.

 - 리액트에서는 라우팅 관련 라이브러리가 많은데, 이중 가장 많이 쓰이는 React Router 활용~

리액트는SPA (Single Page Application) 방식

 - 기존 웹 페이지 처럼(MPA 방식) 여러 개의 페이지를 사용, 새 페이지를 로드하는 방식이 아니다.

 - 새 페이지를 로드 하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리라고 할 수 있다.

1) React Router

React에서 라우팅을 구현하는 가장 일반적인 방법은 react-router-dom 라이브러리를 사용하는 것이다. 이는 SPA(Single Page Application)에서 클라이언트 측 라우팅을 쉽게 구현할 수 있도록 도와준다. 

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

 - 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다.

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

                                 애플리케이션의 루트에 사용하여 HTML5 히스토리 API를 사용한 라우팅을 가능하게 한다.

    ~ HashRouter   : 해시 주소(http://goddaehee.tistory.com/#test )를 감지한다.

2) 설치

> npm install react-router-dom   : 해당 프로젝트 폴더에서 명령을 주자!

    또는

> yarn add react-router-dom

   참고로 package.json 파일에 "react-router-dom": "^6.5.0", 처럼 등록된 것을 볼 수 있다.

Router를 활용해 보자

1. <BrowserRouter>태그로 컴포넌트 사용하기

- BrowserRouter를 사용 할 것이기 때문에 <BrowserRouter> 태그로 컴포넌트를 감싸주자.

- Header는 모든 URL에 공통 적용할 Component로 최상단에 위치한다.

2. <Routes>, <Route> 컴포넌트 사용하기 예시

 - 각각의 라우트와 그에 해당하는 컴포넌트를 정의한다.

 - <Routes>컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 Route 단 하나만을 렌더링 시켜준다.

 - <Route>는 path 속성에 경로를, element속성에는 컴포넌트를 넣어준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.

2.1) "/"로 접근 시 메인 페이지(Main.js)를 보여준다.

2.2) 예를 들어 "/product/상품번호"로 접근 시 상품상세 페이지(Product.js)를 보여 주게 된다.

3. <Link> 태그로 컴포넌트 사용하기

 - 다른 경로로 이동할 수 있는 링크를 생성한다.  

 - 웹 페이지에서는 원래 링크를 보여줄 때 a태그를 사용한다. 하지만 a태그는 클릭 시 페이지를 새로 불러오기 때문에 사용하지 않는다.

 - Link 컴포넌트를 사용하는데, 생김새는 a태그와 유사하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

 - 문법 : <Link to="경로">링크명</Link>

 - import { Routes, Route, Link } from 'react-router-dom';

4. useNavigate

 - Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다.

 - replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다.

import { useNavigate } from 'react-router-dom';
...
    const navigate = useNavigate();
    return (
      <> 
          <ul>
              <li><button xxxxonClick={() => navigate(-1)}>Go back</button></li>
              <li><button xxxxonClick={() => navigate(1)}>Go forward</button></li>
              <li><button xxxxonClick={() => navigate(2)}>Go 2 pages forward</button></li>
              <li><button xxxxonClick={() => navigate('/')}>Go Root</button></li>
              <li><button xxxxonClick={() => navigate('/', {replace: true})}>Go Root</button></li>
          </ul>
      </>
    );
...

예)

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
// 컴포넌트들 정의
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
        </Routes>
      </div>
    </Router>
  );
};
export default App;

* 주요 컴포넌트와 훅
 - BrowserRouter: HTML5 히스토리 API를 사용하여 브라우저의 주소를 관리
 - Routes: 여러 Route를 감싸서 라우트 매칭을 관리
 - Route: 경로와 그 경로에 매핑되는 컴포넌트를 정의
 - Link: 앵커 태그와 비슷하게 동작하며, 지정된 경로로 이동
 - useParams: 라우트 경로의 매개변수를 추출하는 데 사용
 - useNavigate: 프로그래밍 방식으로 경로를 변경하는 데 사용

React Router는 다양한 종류의 라우터를 제공하여, 웹, 네이티브 애플리케이션, 그리고 기타 환경에서 라우팅을 관리할 수 있게 한다. 주요 라우터 종류는 다음과 같다:
1. BrowserRouter :  HTML5의 history API를 사용하여 URL을 관리하는 라우터이다. 대부분의 최신 웹 애플리케이션에서 주로 사용된다.
예제
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

2. HashRouter : URL의 해시(#)를 사용하여 라우팅을 관리한다. 서버 설정이 필요 없기 때문에 간단한 프로젝트나 정적 웹사이트에서 사용된다.
예제
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

3. MemoryRouter : URL을 메모리에 저장하여 라우팅을 관리한다. 브라우저의 주소 표시줄에 반영되지 않기 때문에 주로 테스트 환경이나 React Native와 같은 환경에서 사용된다.
예제
import { MemoryRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

4. StaticRouter : 주로 서버 사이드 렌더링(SSR)에서 사용된다. 라우터의 위치를 변경하지 않고, 정적인 컨텍스트에서 라우팅을 제공한다.
예제
import { StaticRouter as Router, Route, Switch } from 'react-router-dom';

const App = ({ location }) => (
  <Router location={location}>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

5. NativeRouter (React Native) : React Native 애플리케이션에서 라우팅을 관리하는 데 사용된다. React Router의 React Native 버전이다.
예제
import { NativeRouter, Route, Switch } from 'react-router-native';

const App = () => (
  <NativeRouter>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </NativeRouter>
);

각 라우터의 특징 요약
 - BrowserRouter: HTML5 history API를 사용하여 URL을 관리한다. 브라우저 환경에 적합하며 대부분의 최신 웹 애플리케이션에서 사용된다.
 - HashRouter: URL 해시(#)를 사용하여 라우팅을 관리한다. 서버 설정이 필요 없으므로 간단한 프로젝트나 정적 웹사이트에 적합하다.
 - MemoryRouter: URL을 메모리에 저장하여 라우팅을 관리한다. 브라우저의 주소 표시줄에 반영되지 않으며, 주로 테스트 환경이나 React Native에서 사용된다.
 - StaticRouter: 서버 사이드 렌더링(SSR)에서 사용된다. 정적인 컨텍스트에서 라우팅을 제공한다.
 - NativeRouter: React Native 애플리케이션에서 라우팅을 관리한다. React Router의 React Native 버전이다.

참조 : https://velog.io/@jkove94/React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%9D%BC%EC%9A%B0%ED%8C%85-Page-Routing