React-Router(v6) 란 ?

 

리액트 프로젝트를 하기 위해서 

화면을 전환을 위해 사용하는 React-router-dom을 사용하는데

 

🎁 기본이론부터 v6로 업데이트까지 알아보자! 🎁

 

 

---

 

💖 React-Router 

1. 가장 많이 사용되는 라이브러리 중 하나로, 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해주며 서버 사이드 렌더링을 도와주는 도구들을 제공합니다. 

 

2. React-Router 를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없습니다. (주소값의 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한 라이브러리)

 

3. react-router는 페이스북에서 공식으로 지원하고 있는 라이브러리는 아니지만, 많은 사용자를 보유하고 있다고 합니다.

 

 

 

🎁 공식사이트 🎁

 

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

 

 

 

---

 

📑 react-router와 react-router-dom의 차이?

 

🔊 react-router는 코어까지 들어있는 master 브랜치에 있는 라이브러리 입니다.

 

🔊 react-router-dom은 그 중에서 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리 입니다.

- 예를 들어 <Link>(a태그로 렌더링되는), <BrowserRouter>와 같은 컴포넌트들이 있습니다. 그래서 코어까지 필요하지 않다면 react-router-dom 을  사용하는 것이 좋지 않을까? 라는 생각에 react-router-dom을 선택하였습니다.

 

 

 

 

 

---

 

💻 라우팅이란?

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지를 구성할 수도 있습니다.

 

예를 들어, 블로그를 만든다고 가정해봅시다.

 

• 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 입니다.
• 포스트 목록 페이지: 블로그에 작성된 여러 포스트들의 목록을 보여주는 페이지입니다.
• 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지입니다.

이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다.

 

리액트에서 라우트 시스템을 구축하기위해 사용할 수 있는 선택지는 크게 두가지가 있습니다.

 

 

---

🔊 리액트 라우터(React Router)

리액트 라우터 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.

 

🔊 Next.js

Next.js 는 리액트 프로젝트의 프레임워크입니다. 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공합니다. 이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동합니다. 이 프레임워크는 리액트 라우터의 대안으로 많이 사용되고 있습니다.

 

 

---

 

 

라우팅 관련 기능을 리액트 라이브러리에서 공식적으로 지원하는 것이 아니라 써드 파티로서 제공되기 때문에, 이 외에도 react-location, rakkas 등의 프로젝트들이 존재합니다. 리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글 페이지 애플리케이션 (Single Page Application)을 만들 수 있습니다.

 

 

https://tlsdnjs12.tistory.com/20

MPA vs SPA 이란?

 

 

 

---

 

✨ react-router-dom 설치

🔊 Router설치를 희망하는 React 프로젝트에 터미널을 열어 해당 내용을 입력해 설치한다.

 

 

💻 & 📱(웹&앱)  - react-router 

💻(웹) - react-router-dom

📱(앱) - react-router-native

 

 

# npm 설치
npm i react-router-dom

 

#yarn 설치
yarn add react-router-dom

 

 

 

---

📑 v6 중첩 라우팅 사용

 

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Main, Page1, Page2, NotFound } from "../pages";
import { Header } from ".";

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/page1/*" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

🔊 <BrowserRouter> vs <HashRouter>

- <BrowserRouter>는 HTML5의 history API를 활용하여 UI를 업데이트합니다.

  ▶ Link 컴포넌트로 to 속성에 이동할 경로를 써준다.

  ▶ Route 컴포넌트 path 속성을 Link의 to속성을 component mapping 경로를 기술한다.

  ▶ 새로고침 하면 경로에서 못 찾아 에러가 난다.

 

- <HashRouter>는 URL의 hash를 활용한 라우터입니다. 정적인(static)페이지에 적합합니다.

  ▶ 주소에 해쉬(#)가 붙고 검색 엔진이 읽지 못한다.

 

 

💬 보통 request와 response로 이루어지는 동적인 페이지를 제작하므로 <BrowserRouter>가 보편적으로 쓰입니다. 

 

 

---

🔊 <Routes>

- <Routes>는 다양한 Route끼리 서로 이동 할 수 있도록 해주는 장소입니다.

 

<Routes>
     <Route path="/" element={<Main />} />
</Routes>

 

 

 

---

🔊 <Route>

- <Route>는 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링합니다.

 

/* <Route path="주소규칙" element={<보여 줄 컴포넌트 JSX/>} />*/
<Route path="/main" element={<Main/>} />

 

 

---

 

🔊 < Link>

- < Link>는 a태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있습니다.

 

/*<Link to="경로">링크 이름</Link>*/
<Link to="/app">
	<App />
</Link>