[React] react-router-dom

리액트 라우터 돔이란?

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

설치

yarn add react-router-dom
npm install react-router-dom

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
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";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
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;

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

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

export default App;

• useNavigate

  // 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;

  • navigate 생성 후 navigate(’보내고자 하는 url)을 통해 페이지 이동.
• useLocation

  // 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;

  • 현재 위치하고 있는 페에지의 여러 가지 정보를 추가적으로 얻을 수 있음. 이 정보들을 이용해 페이지 안에서 조건부 렌더링에 사용하는 등 여러 가지 용도로 활용 가능함.
• Link

  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;

  • 훅은 아니지만 알아야할 API
  • html 태그 중 a태그의 기능을 대체하는 API. JSX에서 a태그를 사용해야 한다면 반드시 Link를 사용해서 구현해야 함. 왜냐하면 a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침되기 때문. 브라우저가 새로고침되면 모든 컴포넌트가 리렌더링됨. 또한 리덕스나 useState를 통해 메모리 상에 구축해놓은 모든 상태값이 초기화 됨.

• path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법.
• Dynamic Route를 사용하면 element에 설정된 같은 컴포넌트를 렌더링하게 됨.

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

• useParams Hook을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있음. :id로 설정.

  // 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;

  // 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가 들어있음.
  

• react-router-dom을 이용하면 SPA 기반인 리액트 프로젝트 안에서 여러 개의 페이지 구현 가능.
• Router.js에 Route 설정에 관련된 코드 작성하고 최상위 컴포넌트인 App.js에서 import해서 사용.
• react-router-dom은 여러가지 훅을 제공함. useNavigate(), useLocation(), useParams() 등.