[ React ] React 실전 ① 페이지 라우팅

[ 페이지 라우팅 - REACT SPA & CSR ]

 

Routing : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정

 

전송하는 데이터들은 네트워크 장치를 거쳐서 이동을 한다. 네트워크 장치들은 자신에게 도착한 데이터들이

실시간으로 어디로 가야하는지 다음 네트워크 장치를 알려준다. 최대한 빨리 갈 수 있도록 실시간으로 경로를

지정해준다. 

 

Router : 데이터의 경로를 실시간으로 지정해주는 역할을 한다.

Routing : 경로를 정해주는 행위 자체와 그런 과정들을 다 포함해서 일컫는 말

 

인터넷을 사용해서 웹 사이트에 접속한다는 것은 브라우저를 통해서 웹 서버에 경로 요청을 날리고 그 경로에

해당하는 웹 문서를 받아보는 과정이다. 

 

페이지 라우팅 : 요청에 따라 어떠한 페이지를 돌려줄지 결정하는 과정을 일컫는 말

→ 뤱 서버가 요청에 명시되어있는 경로에 따라 알맞는 페이지를 선택하고 그 페이지를 반환해서 사용자가

그 페이지에 접속하는 과정 ( 페이지 라우팅은 웹 서버들이 처리를 하게 된다. )

 

MPA( Multipage Application ) : 여러 개의 페이지들이 존재하고 요청이 들어오면 경로에 따른 적절한 페이지를 반환

Multipage Application들은 페이지가 이동하게 될 때마다 새로운 페이지를 웹 서버에 요청하고 새로운 페이지를

응답받으면 브라우저가 새로고침 되듯이 페이지를 이동하게 된다.

 

리액트는 MPA 방식이 아니라 SPA( Singlepage Application )을 따른다.

 

SPA( Singlepage Application ) : 단일 페이지 어플리케이션 → 페이지가 하나밖에 없는 간단한 어플리케이션

무슨 페이지를 요청하더라도 웹 서버는 index.html만 반환한다. SPA 방식에서는 다른 페이지는 줄 수 없다.

 

리액트는 자신만의 방식으로 여러 페이지를 오갈 수 있다. 리액트의 SPA로 만든 웹 페이지는 페이지의 이동이
빠르고 쾌적하다. 리액트로 제작한 웹 페이지를 요청하면 어떤 요청을 하더라도 웹 서버는 똑같은 html 페이지인

index.html를 반환한다. 그리고 리액트 앱을 통째로 던져주게 된다. 예를 들어 POST를 요청할 경우 브라우저가
알아서 처리를 해버린다. 즉 페이지를 이동할 때마다 서버와 통신해서 기다리는 시간 자체가 없어지므로 페이지

전환 자체가 매우 빠르다.  데이터가 필요한 경우에는 서버에 데이터만 요청하고 전달받는다. 

 

즉, MPA 방식은 페이지 이동시 html 문서부터 데이터까지 한꺼번에 조립해서 응답을 받기 때문에 오래 걸리지만

SPA 방식을 사용한 페이지 이동은 일단 페이지를 이동하고 데이터가 들어오면 그 때 데이터를 보여주는 방식으로 

매우 빠르다.

 

클라이언트 측에서 알아서 페이지를 랜더하는 방식을 CSR( Client Side Rendering )이라 한다. 

 

리액트는 단일 페이지로 구성되는 SPA 방식을 따르면서 CSR로 페이지를 랜더링 한다.

 

---

[ 페이지 라우팅 - REACT Router 기본 ]

 

리액트 환경에서 페이지 라우팅을 하기 위해서는 CSR 방식을 도와주는 라이브러리를 이용해야 한다. 

→ 리액트 라우터 라이브러리를 활용

 

https://reactrouter.com/en/main

Home v6.4.1

 

1. 리액트 라우터 다운로드 명령어

 

npm install react-router-dom@6

 

2. 제대로 설치되었는지 확인하기 → package.json에서 확인 가능

 

 

3. 페이지들을 저장할 page 폴더 생성 후 컴포넌트 생성하기 ( 모든 컴포넌트 똑같이 생성 )

 

 

4. 페이지 라우팅 만들어보기

 

① 브라우저 URL과 리액트 앱을 연결하는 기능을 하는 BrowserRouter 컴포넌트로 APP 컴포넌트가 리턴하는 

부분을 감싸주기

 

App.js

import { BrowserRouter } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <div className="App">hello</div>;
    </BrowserRouter>
  );
}

export default App;

 

BrowserRouter로 감싸져 있는 부분은 브라우저의 URL과 맵핑될 수 있다. 

 

② 만들어놓은 4개의 페이지를 import 하고 브라우저의 URL이 변경이 되면 어떤 컴포넌트를 랜더링해서 컴포넌트가
페이지 역할을 하도록 결정하기 위해서 바뀔 부분을 Routes 컴포넌트로 감싸준다. 

 

Route 컴포넌트는 실질적으로 URL 경로와 컴포넌트를 맵핑시켜주는 기능이다.

 

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Edit from "./pages/Edit";

function App() {
  return (
    <BrowserRouter>
      <div className="App">hello</div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="/edit" element={<Edit />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

path로 경로를 가리키고 있으면 경로에 해당하는  컴포넌트를 랜더한다. 맵핑되지 않는 URL에 접근할 경우, 

Routes에 맵핑되는 컴포넌트가 없으므로 랜더링할 수 없다. 

 

페이지가 바뀔 때 변화하는 부분은 Routes 컴포넌트 안에 있는 부분이다. 그러므로 Routes 컴포넌트 밖에 있는

요소는 어떤 페이지에서라도 계속해서 보여준다. 

 

 

③ 페이지를 이동하는 컴포넌트 만들어보기

 

html에서 a 태그를 통해 페이지를 이동하면 새로고침을 통해 이동하게 된다. 새로고침을 통해 이동하는 것은 SPA의

특징이 아니라 MPA의 특징이다.

 

리액트의 SPA는 a 태그로 페이지 이동을 하지 않는다. * a 태그를 사용하는 경우는 외부 페이지에 접근할 때 사용

리액트는 별도의 컴포넌트를 사용해서 페이지 이동을 하게 된다. 

 

CSR 방식으로 페이지를 이동하는 link 컴포넌트 사용하기

 

RouteTest.js

import { Link } from "react-router-dom";

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/diary"}>Diary</Link>
      <br />
      <Link to={"/edit"}>Edit</Link>
      <br />
      <Link to={"/new"}>New</Link>
      <br />
    </>
  );
};

export default RouteTest;

 

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Edit from "./pages/Edit";
import RouteTest from "./components/RouteTest";

function App() {
  return (
    <BrowserRouter>
      <div className="App">hello</div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="/edit" element={<Edit />} />
      </Routes>
      <RouteTest />
    </BrowserRouter>
  );
}

export default App;

 

 

링크를 누르면 굉장히 빠르게 페이지 이동을 할 수 있다.

 

CSR 방식으로 페이지 이동을 하게 되면 실제로 페이지를 이동하기 보다는 페이지 역할을 하는 컴포넌트와 URL을

바꿔서 페이지를 이동하는 것 처럼 보이게 구현하게 된다.

 

---

[ 페이지 라우팅 - REACT Router 응용 ]

 

React Router : React에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

* React Router의 버전을 꼭 확인해야함

 

< React Router V6의 유용한 기능 >

1. Path Variable : 경로의 변수를 사용

2. QueryString : URL과 함께 데이터를 전달

3. Page Moving : 페이지를 이동시키는데 link 태그가 아닌 액션을 취하지 않았을 때 강제로 이동

 

---

1. path variable

 

URL에 변수를 담아서 전달하는 방식은 경로에 변수를 사용한다해서 path variable이라 한다. 

path variable은 useParams hook을 사용해서 가져올 수 있다.

 

path variable은 Route 컴포넌트의 path 속성에 처리를 해줘야 한다.

 

 <Route path="/diary/:id" element={<Diary />} />

 

콜론을 사용해서 뒤에 있는 id라는 이름으로 값을 전달하겠다고 선언을 해주게 된다. 

 

id가 없는 페이지의 예외처리는 path를 2개를 사용한다.

 

<Route path="/diary/:id" element={<Diary />} />
<Route path="/diary" element={<Diary />} />

 

id라는 path variable을 꺼내서 사용하기 위해서는 해당 컴포넌트에서 처리를 해줘야한다.

useParams는 리액트가 제공하는 hook은 아니지만 별도의 라이브러리가 자신의 라이브러리 기능을 좀 더 편하게

사용할 수 있도록 제공하는 hook을 customed hook이라 한다.

 

Diary.js

import { useParams } from "react-router-dom";

const Diary = () => {

  const {id} = useParams();

  return (
    <div>
      <h1>Diary</h1>
      <div>이곳은 일기 상세페이지입니다.</div>
    </div>
  );
};

export default Diary;

 

useParams()를 이용하면 전달받아 들어오는 path variable들을 모아서 객체로 갖다 주게 된다. 

App 컴포넌트와 Diary 컴포넌트에서의 path variable 이름은 같아야 한다. 

 

---

2. QueryString : name과 value를 엮어서 데이터를 전달할 수 있는 방법

 

Query : 웹 페이지에 데이터를 전달하는 가장 간단한 방법

 

물음표 뒤에 있는 경로들은 페이지 라우팅하는 경로에 영향을 주지 않는다. 

 

http://localhost:3000/new?id=10&mode=dark

 

Eidt.js

import { useSearchParams } from "react-router-dom";

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  const mode = searchParams.get("mode");

  return (
    <div>
      <h1>Edit</h1>
      <div>이곳은 수정 페이지입니다.</div>
    </div>
  );
};

export default Edit;

 

QueryString은 searchParams와 setSearchParams 2개로 전달받을 수 있는 배열을 반환하게 된다.

그리고 searchParams는 get을 통해서 전달받은 queryString을 꺼내서 사용할 수 있다.

setSearchParams는 SearchParams를 변경시키는 역할을 한다. 즉, queryString을 바꿀 수 있다는 의미이다.

 

Eidt.js

import { useSearchParams } from "react-router-dom";

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  const mode = searchParams.get("mode");

  return (
    <div>
      <h1>Edit</h1>
      <div>이곳은 수정 페이지입니다.</div>
      <button onClick={() => setSearchParams({ who: "2chaechae" })}>
        변경하기
      </button>
    </div>
  );
};

export default Edit;

 

---

3. Page Moving : navigate hook을 이용해서 구현

 

Edit 페이지에서 Home 페이지로 이동하기

 

import { useNavigate, useSearchParams } from "react-router-dom";

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  const mode = searchParams.get("mode");

  const navigate = useNavigate();

  return (
    <div>
      <h1>Edit</h1>
      <div>이곳은 수정 페이지입니다.</div>
      <button onClick={() => setSearchParams({ who: "2chaechae" })}>
        변경하기
      </button>
      <button
        onClick={() => {
          navigate("/");
        }}
      >
        HOME으로 가기
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로 가기
      </button>
    </div>
  );
};

export default Edit;

 

뒤로 가기의 경우는 navigate에 -1을 전달해주면 된다.