[React]Page Routing

🤔Routing이란?

어떤 네트워크 내에서 통신 데이터를 보낸 경로를 선택하는 일련의 과정 - 위키백과

Router: 데이터의 경로를 실시간으로 지정해주는 역할을  하는 무언가 즉, 길잡이의 역할을 한다.

Routing: 경로를 정해주는 행위와 그런 과정들을 다 포함하여 일컫는 말이다.

 

🤔Page Routing이란?

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

요청(Request)에 명시된 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정 자체를 Page Routing이라 한다.

 

👉 MPA와 SPA, SSR과 CSR

리액트와 같은 경우 단일 페이지로 구성되는 SPA 방식을 따르며 CSR으로 페이지를 렌더링 한다.

 

✅ React Router

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

2021년 11월 React Router는 V5 -> V6로 업데이트되었다.

 

React Router 공식 문서를 기반으로 작성해보자.  👉 React Router 공식 문서

설치

npm install react-router-dom

OR

yarn add react-router-dom

사용 예시

App.js

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

import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

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

export default App;

최상위 태그에 <BrowerRouter>로 감싸주게 되면 감싸진 부분은 url과 매핑될 수 있다.

<Routes>는 페이지가 변경될 컴포넌트들을 모아 놓는 곳이다. <Routes> 바깥쪽에 위치하는 코드들은 url에 의해 변경되지 않는다. 그렇다면 위 코드에서 변하지 않는 코드는 무엇일지 생각해보자.

바로 h2태그로 감싸진 App.js가 될 것이다.

페이지 전체적으로 보여주어야 하는 요소들을 작성할 때는 Routes 바깥에 작성해주도록 한다.

<Route> 컴포넌트는 실질적으로 url경로와 컴포넌트를 매핑시켜주는 컴포넌트이다. 

 

New.js - 모두 비슷한 형태이기에 New.js만 보자.

const New = () => {
  return (
    <div>
      <h1>New</h1>
      <p>이곳은 일기 작성 페이지 입니다.</p>
    </div>
  );
};

export default New;

이번에는 페이지 이동 요소를 만들어보자. 

기존에는 a태그를 이용하여 이동을 구현했다. a태그를 클릭하여 url이 변경되면 새로고침 되는 것을 볼 수 있다. 이것은 SPA의 특징이 아닌 MPA의 특징이다. 즉, a태그로 페이지를 이동시키면 SPA의 빠른 페이지 이동(쾌적한 UX)을 사용할 수 없게 된다. a태그로 페이지를 이동하는 경우는 해당 페이지 외부로 나가는 이동을 구현할 때만 사용한다.

그럼 react router의 페이지 이동을 구현해보자. 

 

✅ React Router로 페이지 이동하기

RouteText.js

React Router에서 제공하는 CSR방식으로 페이지를 이동시켜주는 컴포넌트인 Link를 사용하였다.

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

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>Home</Link> <br />
      <Link to={"/diary"}>DIARY</Link> <br />
      <Link to={"/new"}>NEW</Link> <br />
      <Link to={"/edit"}>EDIT</Link>
    </>
  );
};

export default RouteTest;

App.js

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

import RouteTest from "./components/RouteTest";

import Home from "./pages/Home";
...

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

export default App;

네 개의 링크를 클릭하면 컴포넌트가 리렌더 되면서 페이지가 이동된다. CSR 방식을 이용하여 쾌적한 페이지 이동이 완성되었다. 실제로 페이지를 이동시키는 것보다는 페이지 역할을 하는 컴포넌트를 변경시키고 url을 바꿈으로써 마치 페이지가 이동한 것처럼 보이게 만드는 방식이다.

 

✅ Path Variable

useParams

react-router에서 제공하는 Hooks 중 하나로 Parameter 값을 URL을 통해 넘겨서 넘겨받은 페이지를 사용할 수 있도록 한다. 예를 들어, 여러 개의 게시물에 상세 내용이 담겨있고, 클릭해서 상세 페이지로 이동 하도록 구현한다면, 게시물의 id 값을 URL로 넘겨 상세 페이지의 id 값에 해당하는 게시물 정보만 출력하도록 도와준다.

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

데이터들이 나열되어 있는 리스트 페이지에서 링크 값에 넘겨줄 id 정보를 담아준다. 이 정보는 객체의 value 값이다. 즉, 파라미터로 넘겨지는 데이터는 key와 value인 객체 형태인 것을 알 수 있다.

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

const Diary = () => {
  const { id } = useParams();
  console.log(id);

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

export default Diary;

url에 임의로 id 값을 주면 console에 해당 url의 id 값을 받아온다. 이로써 정상적으로 작동한다는 것을 알 수 있다.

해당 url의 id 값 출력

 

✅ Query String 👉 쿼리 스트링 등 정리

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

예시: /edit?id=10&mode=dark

useSearchParams

현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정하는 데 사용된다.

React의 "useState hooks"와 마찬가지로 현재 위치의 검색 매개변수와 이를 업데이트하는 데 사용할 수 있는 함수라는 두가지 값의 배열을 반환한다.

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

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

  const id = searchParams.get("id");
  console.log("id: ", id);

  const mode = searchParams.get("mode");
  console.log("mode: ", mode);

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 일기 수정 페이지 입니다.</p>
      <button onClick={() => setSearchparams({ who: "jeongmin" })}>
        QS 바꾸기
      </button>
    </div>
  );
};

export default Edit;

만약 /edit?id=10&mode=dark 형태의 url을 가진다면 console에 id: 10과 mode: dark가 찍힐 것이다.

버튼을 클릭하면/edit?who=jeongmin으로 변경될 것이다. 

앞서 말했듯이 useSearchParams 훅은 useState와 비슷하게 동작한다.

 

 

✅ Page Moving

useNavigate

navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) 

이 훅은 예를 들어 effect에서  프로그래밍 방식으로 탐색할 수 있는 함수를 반환한다. 

공식 문서의 내용이지만 잘 이해가가지 않는다.

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: {
      replace?: boolean;
      state?: any;
      relative?: RelativeRoutingType;
    }
  ): void;
  (delta: number): void;
}

useNavigate를 선언하고 사용하게 될 navigate 함수는 두가지 시그니처가 있다.

 

Either pass a To value (same type as <Link to>) with an optional second { replace, state } arg or

 - state나 replace를 인수로 사용하여 To 값(<Link to> 와 동일한)을 전달하거나

 

Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button.

 - history stack에 가고자 하는 델타를 전달한다. 예를 들어, navigate(-1)은 뒤로 가기 버튼과 같다.

 

what is history stack?? delta??...

개발 공부를 하면서 학여천정 이라는 사자성어가 떠오른다.

우물을 파는 것과 같으며 어렵긴 하다. 하지만 기쁘다🤗 

우물을 파는 것과 같은 배움, 개발이라는 것이 큰 가치를 가지고 있으며 행복감을 가져다 준다 !!

 

갑자기 이상한 말을 해버렸지만 history stack에 관해선 다음에 다루어보도록 하자!

 

예시로 이해해보자.

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

const Edit = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 일기 수정 페이지 입니다.</p>
      <button onClick={() => { navigate("/home"); }}
      >
        홈으로 가기
      </button>
      <button onClick={() => { navigate(-1); }}
      >
        뒤로 가기
      </button>
    </div>
  );
};

export default Edit;

버튼을 클릭하면 home으로 이동하는 코드를 구현해보았다. useNavigate 훅은 페이지를 이동시킬 수 있는 기능을 하는 함수를 반환해준다. 인자로 경로를 명시해주면 함수를 호출해서 경로를 이동시켜줄 수 있다.

<Link> 태그를 클릭하지 않고도 의도적으로 페이지를 변경시킬 수 있다.

 

1. Link

• 클릭 시 바로 이동하는 로직 구현 시에 사용
• ex) 상품 리스트에서 상세 페이지 이동 시

2. useNavigate

• 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
• ex) 로그인 버튼 클릭 시
  • 회원가입 되어 있는 사용자 -> Main 페이지로 이동
  • 회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동