리액트의 페이지 라우팅과 react-router-dom v6 활용

1. 페이지 라우팅(page-routing)의 개념

먼저 라우팅(routing)이란 뭘까요?

검색을 하면 '어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정'이라 나옵니다.

말이 어렵죠

쉽게 말해서 데이터를 보낼건데 그 데이터는 한 방에 목적지로 가지 않습니다.여기저기 들려서 전해집니다.그 여기저기 경로를 선택하는 과정이라 생각하면 됩니다.

그래서 라우터(router)란 실시간으로 데이터들이 어디로 가야될지 알려주는 길잡이라 할 수 있고

따라서 라우팅(routing)이란 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말입니다.

리액트에서 페이지 라우팅은 다양한 화면 간 전환이 가능하도록 도와주는 핵심 개념입니다.

단순히 어떤 요청에 따라서 어떤 페이지를 돌려줄지 결정하는 그런 과정을 일컫는 말입니다.

이를 위해 react-router-dom 라이브러리를 사용하여 간편하게 라우팅을 구현할 수 있습니다.

이 글에서는 react-router-dom 버전 6를 사용했습니다.

2. Route와 Router의 개념

Router:

Router는 위에서 길잡이라고 했죠?

애플리케이션 내에서 라우팅을 관리하는 컴포넌트입니다.

일반적으로 BrowserRouter를 사용하여 브라우저의 URL을 기반으로 라우팅을 처리합니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Edit from "./pages/Edit";
import RouteTest from "./components/RouteTest";
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/edit" element={<Edit />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

(위의 <RouteTest /> 컴포넌트는 밑에 Link에서 하겠습니다)

위 코드를 보시면 App 컴포넌트의 return 값 최상위 태그로

BrowserRouter 태그가 위치하는 것을 볼 수 있습니다.

BrowserRouter 태그 안에서 라우팅 기술을 사용하면 됩니다.

Route:

Route는 특정 URL 경로에 대한 컴포넌트를 매핑해주는 역할을 합니다.

Routes 태그 안에 Route가 각각 위치하게 됩니다. 

그 부분이 URL에 따라서 업데이트 되는 것입니다.

위 코드에서 Route 태그를 보시면 path와 element가 보입니다.

각각 URL과 해당 컴포넌트를 매치 시켜주면 됩니다. 쉽죠?

Routes 태그 안이 업데이트 된다는 것을 생각하면

반대로 Routes 안이 변경되는 동안

Routes 태그 밖의 <h2>App.js</h2>는 그대로 계속 있다는 것을 유추할 수 있습니다.

Link:

Link는 사용자가 클릭할 수 있는 링크를 제공하는 컴포넌트로, 페이지 간의 이동을 가능케 합니다.

위 코드에서 <RouteTest /> 컴포넌트가 있었는데 아래와 같습니다.

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

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/edit"}>EDIT</Link>
    </>
  );
};

export default RouteTest;

Link 태그는 해당 태그를 클릭해서 to에 있는 URL로 화면을 이동합니다.

따라서 EDIT을 클릭하게 되면 URL이 /edit으로 변경되고 

<Route> 태그의 path= "/edit"에 걸려서 <Edit> 컴포넌트로 업데이트가 되게 됩니다.

Link 태그는 a태그와 비슷하지만 다른 것 아시겠나요?

a태그와 href를 사용하면 완전히 새로운 요청으로 화면이 깜빡(새로고침처럼)하며 

페이지 전체가 리로딩 되지만

Link 태그는 리액트에서 사용하는 SPA 방식으로 화면이 업데이트가 됩니다.

3. react-router-dom에서의 주요 기능(버전 6)

useParams: Path Variable 활용

Path Variable은 URL의 경로에 변수를 넣어 동적인 값을 전달하는 방식입니다.

ex) http://localhost:3000/userProfile/10

위 예시에서 10을 변수로 동적인 값을 전달하는 것입니다.

useParams는 URL에서 경로 변수(Path Variable)를 추출하는 훅입니다.

Route의 URL 경로가 다음과 같다면

 <Route path="/userProfile/:id" element={<UserProfile />} />

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

const UserProfile = () => {
  const { id } = useParams();

  return <div>User ID: {id}</div>;
}

위 코드처럼 useParams()를 사용해서 id를 추출할 수 있습니다.

당연히 경로의 :id와 추출하는 변수 id는 동일해야 합니다.

useSearchParams: Query String 활용

Query String은 URL 끝에 ?를 붙이고 그 뒤에 key=value 형태로 데이터를 전달하는 방식입니다.

ex) http://localhost:3000/searchResults?id=10&mode=dark

위 예시처럼 데이터가 여러 개일 경우 &로 연결합니다.

useSearchParams는 URL의 쿼리 스트링(Query String)을 추출하는 훅입니다.

쿼리 스트링이란 URL에 변수와 값을 전달하는 방법입니다.

'/edit?id=10&mode=dark' 처럼 생각하면 되겠습니다.

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

const SearchResults = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get("id");
  const mode = searchParams.get("mode");

  return <div>
  <div>id: {id}</div>
  <div>mode: {query}</div>
  <button onClick={() => setSearchParams({ who: "kim" })}>
  	QS 바꾸기
  </button>
  </div>;
}

위 코드를 보시면 useSearchParams 사용해서 배열을 반환 받습니다.

첫 번째 인자를 이용하여 get 메서드와 key 값을 이용해서 전달받은 value를 추출할 수 있습니다.

두 번째 인자(setSearchParams)는 위의 QS 바꾸기 button처럼 활용할 수 있는데

버튼을 클릭하면 어떻게 될까요?

어렵지 않습니다.

URL이 '/edit?id=10&mode=dark' 여기에서 '/edit?who=kim' 여기로 바뀌는 것입니다.

상태관리에서 사용하던 setState랑 비슷합니다. 쿼리스트링 자체를 변경해버립니다.

useNavigate: Page Moving 활용

useNavigate는 프로그래밍 방식으로 페이지를 이동할 수 있게 해주는 훅입니다.

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

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

  return (
    <div>
      <button
        onClick={() => {
          navigate("/");
        }}
      >
        HOME으로 가기
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로가기
      </button>
    </div>
  );
};

export default Edit;

위 코드를 보시면 useNavigate()를 사용하여 navigate 메서드를 반환받습니다.

코드를 보면 금방 알 수 있습니다.

useNavigate의 인자에 URL 경로를 넣어주면 거기로 이동합니다.

-1은 뒤로가기를 의미합니다.이렇게 사용하면 위에서 설명한 Link와 용도가 비슷해보이지만

navigate는 설명했듯이 프로그래밍 방식으로 페이지를 이동시키는 용도로 사용됩니다.

쉽게 말해서 사용자가 직접 클릭해서 이용한다기보단 프로그램에서 이동시키는 것이죠

예를 들어서 로그인이 필요한 페이지에 접근을 시도 할 때

로그인이 안됐을 경우 로그인 페이지로 강제 이동시켜버리는 경우입니다.

4. 마무리

react-router-dom은 리액트에서 강력한 페이지 라우팅을 제공하는 라이브러리입니다.

Route, Router, Link를 통해 경로에 따라 다른 컴포넌트를 렌더링하고,

useParams, useSearchParams, useNavigate를 통해 Path Variable, Query String, Page Moving 등

다양한 라우팅 기능을 활용할 수 있습니다.

이를 통해 동적이고 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다.