[React] React-router-dom은 무엇일까?

React-router-dom

React 애플리케이션에서 클라이언트 측 라우팅을 구현하는 라이브러리

React-router-dom을 이용하면 페이지를 새로고침하지 않고도 URL을 변경하고, 해당하는 컴포넌트를 렌더링할 수 있다.

React-router도 하나의 컴포넌트이다.

 

 

예시 코드와 함께 React-router-dom의 구조와 사용 방법에 대해 알아보자.

 

React-router-dom 설치 코드

yarn add react-router-dom

 

 

💻 예시 코드: 폴더 구조

src 폴더 안에 pages 폴더를 추가한 뒤, Home, About, Contact, Works jsx 파일을 추가한다.

shared 폴더를 추가한 뒤, Router jsx 파일을 추가한다.

 

💻 예시 코드

// Router.jsx 파일 코드
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

// App.jsx 파일 코드
// Router 컴포넌트를 App.jsx에 추가해줘야 한다.
import React from "react";
import Router from "./shared/Router";

const App = () => {
  return <Router />;
};

export default App;

React-Router의 구조는 다음과 같다.

BrowserRouter > Routes > Route

 

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Route는 path와 element라는 속성을 가진다.

path = 이동할 경로

element = 해당 경로에서 보여줄 컴포넌트

 

지정한 path를 통해 url를 수정하면 현재 페이지에서 다른 페이지로 이동할 수 있다.

 

 

Hook 종류

📍 useNavigate

현재 페이지에서 다른 페이지로 이동하게 해주는 hook

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

const Home = () => {
  const navigate = useNavigate(); // useNavigate 훅 사용

  return (
    <div>
      <h1>Home</h1>
      <Button
        onClick={() => {
          navigate("/works");
        }}
      >
        Works 이동
      </Button>
    </div>
  );
};

export default Home;

버튼을 클릭했을 때 useNavigate 훅으로 인해 Work 페이지로 이동하게 된다.

 

📍 useLocation

현재 URL에 대한 정보를 가져올 수 있는 hook

location을 콘솔에 출력했을 때 url에 대한 정보를 담고 있는 객체라는 것을 확인할 수 있다.

그중에서 pathname을 화면에 출력해보았다.

 

import React from "react";
import Button from "../styledComponents";
import { useLocation, useNavigate } from "react-router-dom";

const Works = () => {
  const navigate = useNavigate();
  const location = useLocation();
  console.log(location);

  return (
    <div>
      <h1>Works</h1>
      <div>현재 페이지: {location.pathname.slice(1)}</div>
      <Button
        onClick={() => {
          navigate("/");
        }}
      >
        Home 이동
      </Button>
    </div>
  );
};

export default Works;

 

📍 <Link>

새로고침 없이 URL을 변경하고 컴포넌트를 리렌더링하는 컴포넌트

import React from "react";
import Button from "../styledComponents";
import { Link, useLocation, useNavigate } from "react-router-dom";

const Works = () => {
  return (
    <div>
      <h1>Works</h1>
      <Link to="/contact">Contact 이동</Link> <br />
    </div>
  );
};

export default Works;

HTML의 a 태그와 같다고 생각하면 된다.

a 태그와 다르게 Link 컴포넌트는 새로고침을 하지 않고 url을 변경한다.

 

---

[참고자료]

https://velog.io/@minju1009/React-Router-feat.-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%ED%8C%8C%ED%97%A4..%ED%97%A4%EC%97%84%EC%B9%98%EA%B8%B0-ES6-Export-import-%EB%AC%B8%EB%B2%95