React - React Router Dom 기능 및 동적 라우팅 적용 방법

1. react-router-dom 사용 방법

1. react-router-dom이란?

페이지를 구현할 수 있게 해주는 패키지

React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는 데 사용되는 라이브러리입니다. React 애플리케이션에서 페이지 간의 전환 및 URL에 대한 동적인 라우팅을 처리하는 데 도움이 됩니다.

 

2. react-router-dom 설치하기

(1) 패키지 설치

• vscode 터미널에서 아래 코드를 입력해서 패키지를 설치할 수 있습니다.
  

yarn add react-router-dom 

 

 

3. react-router-dom 사용하기

(1) 사용방법 순서

• 아래 순서대로 코드를 작성하여, react-router-dom을 사용해보겠습니다.

1. 페이지 컴포넌트 생성
2. Router.js 생성 및 router 설정 코드 작성
3. App.js에 import 및 적용
4. 페이지 이동 테스트

 

(2) 페이지 컴포넌트 생성

• 우선 Home, About, Contact, Works 총 4개의 컴포넌트를 만들어보겠습니다.
• src 폴더에 pages 라는 폴더를 만들고 그 안에 만들어보겠습니다. 컴포넌트 안에 내용은 간단한 텍스만 넣어줘 볼게요. 특별한 내용이 없이 단순히 컴포넌트의 이름만 JSX에 넣어주었습니다.

 

(3) Router.js 생성 및 route 설정 코드 작성

• 브라우저에 URL을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분입니다. URL 1개당 페이지 컴포넌트를 매칭해주는 것이죠. 이 한개의 URL을 Route 라고 합니다.
• 그리고 Route들을 설정하는 코드는 Router.js 라는 파일을 별도로 분리해서 많이 작성하곤 합니다. 
• src안에 shared 라는 폴더를 생성해주고, 그 안에 Router.js 파일을 생성해줍니다. 그리고 아래 코드를 작성해봅시다.

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

• 이렇게 작성하면, Route 를 설정할 뼈대가 완성이 된 것 입니다.
• 이제 만든 4개의 페이지 컴포넌트 마다 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>
				{/* 
						Routes안에 이렇게 작성합니다. 
						Route에는 react-router-dom에서 지원하는 props들이 있습니다.

						path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
						element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
				 */}
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

(4) App.js에 Router.js import 해주기

• 이렇게 생성한 Router 컴포넌트를 아래 코드와 같이 App.js에 넣어줍니다.

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

 

• Router.js를 다른 곳도 아닌 App 컴포넌트에 넣어주는 이유는 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문입니다.
• 즉 어떤 컴포넌트를 화면에 띄우던, 항상 App.js를 거쳐야만 합니다. 그래서 path 별로 분기가 되는 Router.js 를 App.js에 위치시키고 서비스를 이용하는 모든 사용자가 항상 App.js → Router.js 거치도록 코드를 구현해주는 것입니다.

---

2. react-router-dom Hooks

(1) react-router-dom Hooks이란?

react-router-dom에서도 유용하게 사용할 수 있는 hook을 제공합니다. 그 종류가 많지만, 가장 쓰임새가 많고 기본적인 것들을 소개할게요. 

 

(2) useNavigate

• 다른 페이지로 보내고자 할 때 사용할 수 있습니다. 
• 버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작성하면 버튼을 클릭했을 때 보내고자 하는 path로 페이지를 이동시킬 수 있습니다. 꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용할 수 있습니다.
• 사용방법은 아래 코드와 같습니다. navigate 를 생성하고, navigate(’보내고자 하는 url’) 을 통해 페이지를 이동 시킬 수 있죠!

// src/pages/home.js
import { useNavigate } from "react-router-dom";

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

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
};

export default Home;

 

(3) useLocation

• react-router-dom을 사용하면, 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있습니다. 이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있습니다.
• 사용방법은 아래 코드를 참고해주세요.

// src/pages/works.js
import { useLocation } from "react-router-dom";

const Works = () => {
  const location = useLocation();
  console.log("location :>> ", location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
    </div>
  );
};

export default Works;

(4) Link

• Link 는 훅이 아니지만, 꼭 알아야 할 API라서 소개합니다.
• Link 는 html 태그중에 a 태그의 기능을 대체하는 API 입니다. 만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link 를 사용해서 구현해야 합니다. 왜냐하면 a 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문입니다. 브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 또한 리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화 됩니다. 이것은 곧 성능에 악역향을 줄 수 있고, 불필요한 움직임입니다.
• 사용방법은 아래 코드를 참고해주세요. 페이지를 이동시키고자 할때 useNavigate 또는 Link를 사용할 수 있게 됐습니다. 앞으로 여러분이 구현을 하면서 더 적합한 방식으로 API를 활용하시면 됩니다.

import { Link, useLocation } from 'react-router-dom';

const Works = () => {
  const location = useLocation();
  console.log('location :>> ', location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
      <Link to="/contact">contact 페이지로 이동하기</Link>
    </div>
  );
};

export default Works;

 

---

3. Dynamic Route, useParam

(1) Dynamic Route란?

Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말합니다. Dynamic Routes 기능을 이용해서 간결하게 동적으로 변하는 페이지를 처리할 수 있습니다.

 

(2) Dynamic Route 설정하기

Router.js이동해서 Dynamic Routes를 설정해봅시다.

Works 페이지에 여러개의 Work가 있고, 그것을 클릭했을 때 각각의 상세페이지로 이동하게끔 구현해봅시다. 일단 Work 라는 페이지가 먼저 있어야겠죠? Work 컴포넌트를 추가해주세요.

// src/pages/Works.js

import React from "react";

const Works = () => {
  return <div>Works</div>;
};

export default Work;

 

그리고 이제 Router.js 이동해서 아래 코드를 추가해주세요.

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 />} />
				{/* 아래 코드를 추가해주세요. 👇 */}
        <Route path="works/:id" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

이전과는 다르게 path에 works/:id 라고 path가 들어갑니다. :id 라는 것이 바로 동적인 값을 받겠다라는 의미입니다. 그래서 works/1 로 이동해도 <Work /> 로 이동하고, works/2, works/3 …. works/100 모두 <Work /> 로 이동하게 해줍니다.

 

2. Dynamic Routes와 useParam

(1) query parameter 조회하기

Dynamic Routes를 사용하면 element에 설정된 같은 컴포넌트를 렌더링하게 됩니다.

<Route path="works/:id" element={<Work />} />

useParams이라는 훅을 사용해봅시다. useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅 입니다. 그래서 만약에 works/1로 이동하면 1 이라는 값을 주고, works/100으로 이동하면 100 이라는 값을 사용할 수 있게 해줍니다.

// src/pages/Works.js

import React from 'react';
import { Link, useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Works() {
  return (
    <div>
      {data.map((work) => {
        return (
          <div key={work.id}>
            <div>할일: {work.id}</div>
            <Link to={`/works/${work.id}`}>
              <span style={{ cursor: 'pointer' }}>➡️ Go to: {work.todo}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export default Works;

 

work 컴포넌트 생성 —>

// src/pages/Work.js

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

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;

 

한번 브라우저 콘솔을 확인해볼까요? { } 형태이고, 그 안에 id와 value가 있는 것을 알 수 있습니다. param 값은 앞으로 꽤 유용하게 사용할 수 있는 소스 입니다.

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';
import Layout from './Layout';
import Work from '../pages/Work';

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          {/* 
						Routes안에 이렇게 작성합니다. 
						Route에는 react-router-dom에서 지원하는 props들이 있습니다.

						path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
						element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
				 */}
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
          <Route path="works/:id" element={<Work />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

 

지금까지 react-router-dom의 여러가지 기능들에 대해 알아봤습니다. 위에서 다룬 내용들 말고도 여러가지 hook 과 기능들이 있으니 아래 react-router-dom 공식문서 참고해서 잘 활용하시길 바랍니다! 😊

 

https://reactrouter.com/en/main