[React] React-Router-Dom

react-router-dom이란?

react-router-dom이란 react의 화면 전환을 도와주는 역할을 합니다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router 를 통해 Link 태그를 사용하여 화면을 전환합니다. react는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없기 때문입니다. 

 

React-Router-Dom 사용하기

1. 패키지 설치

yarn add react-router-dom

 

2. 페이지 컴포넌트 생성

우선 여러개의 페이지를 배우는 것을 배우는 것이니, 가상의 여러페이지 Home, About, Contact, Works 만듭니다.

 

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

브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분입니다.

 

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 해주기

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

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

export default App;

 

정리

• react-router-dom을 이용하면, SPA 기반 인 리액트 프로젝트 안에서 여러개의 페이지를 구현할 수 있다.
• Router.js에 Route 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인 App.js에서 import 해서 사용한다.