[React] Router

Router

설치

yarn add react-router-dom

 

세팅

라우터는 아래와 같이 src > index.js에 App을 BrowserRouter 로 감싸서 App 에서 Route 에 따라서 컴포넌트를 렌더링 해줄 수 있게 한다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

• BrowserRouter: 주소 / 에 따라서 다르게 렌더링한다.
• MemoryRouter: 보여지는 / 주소는 똑같지만, 임의의 보여지지 않는 주소로 다르게 렌더링해준다.

 

적용

import { Route, Routes, Link } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";

function App() {
  return (
    <>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
}

export default App;

링크를 눌러서 경로를 이동하고 싶은 경우 <a> 태그가 아닌 Router의 <Link> 를 이용해야 한다.

<a> 태그를 통해 이동할 경우 페이지가 새롭게 로딩된다.

하지만 우리는 새로운 요청을 하지 않고 페이지 리렌더링만 이루어지는 것을 원한다.

Router의 <Link> 를 이용하면 페이지가 새롭게 로딩되지 않고, 리렌더링만 이루어지는 것을 확인할 수 있다.

 

확인방법:

개발자도구 Network 탭에서 <a> 태그를 눌러서 이동했을 때와, <Link> 를 통해 이동했을 때를 패치되는 내용을 확인해보면 된다.

 

URL 파라미터

각 파라미터에 담긴 데이터를 확인할 수 있다.

먼저, 아래와 같이 해당 라우트에 보여질 컴포넌트와, 변수명을 설정해준다.

import { Route, Routes, Link } from "react-router-dom";
import Profile from "./page/Profile";

function App() {
  return (
      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
  );
}

export default App;

 

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

const profileData = {
  velopert: {
    name: "김민준",
    description: "Frontend Enginner @RIDI",
  },
  homer: {
    name: "호머 심슨",
    description: "마지 심슨 남편",
  },
};

const Profile = () => {
  const { username } = useParams();
  const profile = profileData[username];

  if (!profile) {
    return <div>존재하지 않는 사용자입니다!</div>;
  }

  return (
    <div>
      <h3>
        {username} ({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
};

export default Profile;

다음과 같이 설정 후 프로젝트에서 /profile/velopert 또는 /profile/homer 와 같이 접근했을 때 각각 다른 데이터가 보여지는 것을 확인할 수 있다.

그리고 /profile/asdf 와 같이 없는 유저 값으로 접근 시 존재하지 않는 사용자입니다! 문구가 출력되는 것을 확인할 수 있다.

 

 

참고

- https://velog.io/@wjd489898/ReactURL-%EC%A0%95%EB%B3%B4%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0matchuseParams