React - React Router Dom

react-router-dom

지금까지 styled-components와 redux 같은 패키지에 대해서 배워왔다. 둘에 이은 또다른 유용한 패키지가 이 react-router-dom이다.

여러페이지를 가진 웹을 만들 수 있게 해주는 라이브러리이다.

react-router-dom 설치하기

yarn add react-router-dom

react-router-dom 사용하기

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

1. 페이지 컴포넌트 생성

src폴더에 pages폴더를 만들고 그 안에 구성하고 싶은 컴포넌트들의 js파일들을 만들어준다.(ex. Home, About, Contact, Works...)

2. Router.js 생성 및 route 설정 코드 작성

가장 중요한 부분!!!

브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분이다. URL 1개당 페이지 컴포넌트 1개를 매칭해주는 것이다. 이 한개의 URL을 Route라고 한다.

그리고 Route들을 설정하는 코드는 Router.js라는 파일을 별도로 분리해서 많이 작성하곤 한다.

src폴더에 shared라는 폴더를 생성해주고, 그 안에 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>
				{/* 
						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;

이렇게 해주면 router.js파일의 작성이 끝난다.

3. App.js에 Router.js import해주기

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

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

export default App;

App 컴포넌트가 전체 프로젝트에서 가장 최상위에 존재하는 컴포넌트이기 때문에 이곳에 넣어준다. 이러면 전체 라우팅 과정이 완료된다.

react-router-dom Hooks

react-router-dom 라이브러리도 자체적인 훅을 제공한다. 그중 몇가지를 소개한다.

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;

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;

Link

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

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;