[React.js] React Router

※ 라우팅에 대해 알기전에 SPA에 대한 이해가 먼저 필요하다. [React.js] SPA vs MPA

 

라우팅(Routing)

라우팅이란 사용자가 요청한 url에 따라 해당 url에 맞는 페이지를 보여주는 것이다.

리액트로 SPA를 개발할 때 라우팅을 위해 react-router 라이브러리를 사용한다.

 

React Router 설치

npm i react-router-dom@6 // @6은 6버전을 설치하겠다는 의미

 

React Router 컴포넌트 구현 예제

import "./App.css";
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";
import RouteTest from "./components/RouteTest";

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

export default App;

 

먼저 설치한 react-router-dom 패키지로부터 React Router의 핵심 컴포넌트들을 임포트 해야한다.

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

 

Route 컴포넌트를 이용하여 사용자가 입력한 url에 따라 어떤 컴포넌트로 이동할지 지정할 수 있다.

<Routes>
  <Route path="/" element={<Home />}></Route>
  <Route path="/new" element={<New />}></Route>
  <Route path="/edit" element={<Edit />}></Route>
  <Route path="/diary/:id" element={<Diary />}></Route>
</Routes>

 

RouteTest 컴포넌트에서는 Link 컴포넌트를 이용하여 HTML의 <a> 태그와 같이 해당 경로로 이동시켜주는 기능을 한다.

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

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

 

 

---

 

 

Path Variable 사용하기

1. useParams

위와 같이 url 경로에 변수를 사용하게 되는 경우가 있다. 예를 들어 첫 번째 일기의 주소는 /diary/1, 두 번째 일기의 주소는 /diary/2와 같이 표현할 수 있다. 이 때 useParams라는 React Hook을 사용한다.

 

useParams 사용 예제

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/new" element={<New />} />
  <Route path="/edit" element={<Edit />} />
  <Route path="/diary/:id" element={<Diary />} />
</Routes>

주소에 id 변수를 사용하기 위해 기존 경로에 /:id를 추가해주었다.

 

Diary.js

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

const Diary = () => {
  const { id } = useParams();
  console.log(id);
  return (
    <div>
      <h1>Diary</h1>
    </div>
  );
};

export default Diary;

전달된 path variable들은 해당 컴포넌트에 객체로 전달되고 useParams로부터 비구조화 할당 받아 접근할 수 있다.

---

2. Query String

 

위와 같이 주소에 데이터를 전달하는 방식을 Query String이라고 한다.

Query String을 사용하기 위해서는 useSearchParams라는 React Hook을 사용한다.

 

useSearchParams 사용 예제

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: 'LeeSunho' })}>
        QS 바꾸기
      </button>
    </div>
  );
};

export default Edit;

 

const [searchParams, setSearchParams] = useSearchParams();

• searchParams는 .get()을 통해서 전달 받은 변수를 꺼내올 수 있는 객체의 역할
• setSearchParams는 searchParams의 값을 변경 시키는 기능

 

 

---

페이지 이동하기 - useNavigate

const navigate = useNavigate();

useNavigate는 페이지를 이동시키는 React Hook이다. 

위에서 나왔던 Link 컴포넌트와의 다른 점은 useNavigate는 함수라는 점이다.

따라서 단순한 클릭뿐만 아니라 어떠한 조건을 만족했을 시 이동할 때 사용하기에 적합하다.

 

useNavigate 사용 예제

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

const Edit = () => {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  return (
    <div>
      <button
        onClick={() => {
          navigate("/home");
        }}
      >
        홈으로 가기
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로 가기
      </button>
    </div>
  );
};

export default Edit;

---