[React] SPA와 react-router-dom v6 되면서 바뀐점

📌 라우팅

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

 

📌 SPA (Single Page Application)

서버로부터 각각의 페이지를 요청하는 것과 다르게 한 번에 덩어리를 받아오고 내부에서 url에 맞춰 보여줄 것만 보여주는 것이다. 즉, 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

 

SPA 라우팅 과정

1. 브라우저에서 최초 ' / ' 경로로 요청을 하면

2. React Web App을 내려준다.

3. 내려받은 React App에서 ' / ' 경로에 맞는 컴포넌트를 보여준다.

4. React App에서 다른 페이지로 이동하는 동작을 수행하면

5. 새로운 경로에 맞는 컴포넌트를 보여준다.

 

📌  react-router-dom

 

- cra(create-react-app)에 기본 내장된 패키지가 아니다.

- react-router-dom은 facebook의 공식 패키지는 아니다.

- 가장 대표적인 라우팅 패키지다.

 

 

설치

npm i react-router-dom

 

특정 경로에서 보여줄 컴포넌트를 준비한다.

 

 ' / '  Home 컴포넌트

export default function Home() {
  return <div>Home 페이지입니다.</div>;
}

' /profile' Profile 컴포넌트

export default function Profile() {
  return <div>Profile 페이지입니다.</div>;
}

'/about' About 컴포넌트

export default function About() {
  return <div>About 페이지입니다.</div>;
}

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

- Route 컴포넌트에 경로(path)와 컴포넌트(component)를 설정하여 나열해준다.

- BrowserRouter로 Route들을 감싸준다.

- 브라우저에서 요청한 경로에 Route의 path가 들어있으면 해당 component를 보여준다.

 

Switch 대신 Routes

---

- Switch의 네이밍이 Routes로 변경됐다.

- exact 는 더 이상 사용하지 않고 여러 라우팅을 매칭 하고 싶은 경우 URL 뒤에 * 을 사용한다.

 (exact가 기본으로 되어있다.)

- Route는 Routes의 직속 자식이어야 한다.

- Route에 children이나 component가 사라지고, 대신에 element 사용한다.

 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";
import Links from "./components/Links";

function App() {
  return (
    <BrowserRouter>
      <Links />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/profile/:id" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

useParams()

---

userParams Hook을 이용하여 :id 값을 받아온다.

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

export default function Profile() {
  const { id } = useParams();
  console.log(id, typeof id); // string
  return (
    <div>
      <h2>Profile 페이지입니다.</h2>
      {id && <p>id는 {id} 입니다.</p>}
    </div>
  );
}

 

useLocation()

---

useLocation  Hook을 이용하여 queryString 값을 받아온다.

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

export default function About() {
  const pathname = useLocation();
  console.log(pathname.search);
  return <div>About 페이지입니다.</div>;
}

 

useHistory() 대신 useNavigate()

---

Link태그와 유사한 작업을 할 수 있게 도와주는 Hook이다.

아래와 같이 useHistory를 사용하면, URL의 끝에 /home을 추가함으로써 페이지 이동이 가능했지만

v6 버전은 useNavigate Hook을 이용하여 페이지를 이동한다.

 

useHistory의 history는 객체였지만 useNavigate의 navigate는 함수다.

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

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

 

NavLink

---

NavLink를 import하여 a태그처럼 링크 설정을 해준다.

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

export default function NavLinks() {
  return (
    <ul>
      <li>
        <NavLink
          to="/"
          style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
        >
          Home
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/profile"
          style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
        >
          Profile
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/profile/1"
          style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
        >
          Profile/1
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about"
          style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=mark/*"
          style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
        >
          About?name=mark
        </NavLink>
      </li>
    </ul>
  );
}

 

Links 컴포넌트를 import하여 사용해준다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";
import Links from "./components/Links";
import NavLinks from "./components/NavLinks";

function App() {
  return (
    <BrowserRouter>
      <Links />
      <NavLinks />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/profile/:id" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

Upgrading from v5 v6.3.0