react-router-dom

SPA란?

 

Single Page Application의 약자로써 서버에서 주는 html이 1개 뿐인 어플리케이션을 뜻한다.

SPA가 아닌 웹사이트는 페이지를 이동할 때마다 서버에서 정적자원들을 내려준다면,

SPA는 딱 한번만 정적자원을 받아온다.

 

• html을 하나만 쓰는 이유는 대표적으로 사용성 때문이다. 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 불러오다보니 비효율적이다.

• SPA의 단점은 처음 딱 한번 모든 정적자원을 내려받는데 이 때 컴포넌트의 수가 너무 많다면 첫 로딩속도가 저하되게 된다. 

라우팅이란?

 

html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 컴포넌트를 다르게 뿌려 다른 페이지를 보여줄 수 있다.

이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 한다.

 

react-router-dom

 

바로 이 react-router-dom이 우리가 사용할 라우팅 패키지이다.

라우팅을 할 때 이 패키지의 도움을 받아서 진행할 것이다.

 

설치 및 사용

 

패키지 설치

yarn add react-router-dom

 

사용방법 순서

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

페이지 컴포넌트 생성

 

src 폴더에 pages라는 폴더를 만들고 그 안에 Home, About, Contact, Works 총 4개의 컴포넌트를 만들어보자.

그 후 위와 같이 입력한다.

 

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 라는 함수를 만들고 아래와 같이 작성한다.
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

위에서 만든 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들이 있다.

	paht는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 된다.
	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;

 

App.js에 Router.js import 하기

 

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

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

export default App;

 

Router.js를 App.js에 넣어주는 이유는 App 컴포넌트가 최상위 컴포넌트이기 때문이다.

 

페이지 이동 테스트 

 

localhost:3000 뒤에 각각 /about  /contact  /works를 입력해보자.

페이지별로 각각 About, Contact, Works가 렌더링 되는 것을 볼 수 있을 것이다.

 

react-router-dom-Hooks

 

react-router-dom Hooks이란?

 

리액트에서도 useState와 같은 Hooks을 제공하듯이, react-router-dom에서도 

우리가 유용하게 사용할 수 있는 hook을 제공한다. 그 중 일부를 살펴보도록 하자.

 

useNavigate

 

다른 페이지로 보내고자 할 때 사용할 수 있다.

위에서는 직접 path를 입력하여 페이지를 이동하는 방법을 사용했지만, 사실상 사용자들이 

path를 직접 입력하여 이동하는 경우는 거의 없다.

 

알다시피, 보통은 어떤 버튼이나 컴포넌트를 눌렀을 때 페이지를 이동하게 만든다.

useNavigate는 그럴 때 사용하는 훅이다.

 

버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작성하면 버튼을 클릭했을 때 우리가 보내고자 하는

path로 페이지를 이동시킬 수 있다. 꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용 가능하다.

 

사용방법은 아래와 같다. navigate 생성 후 navigate('보내고자 하는 url')을 통해 페이지를 이동시킬 수 있다.

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

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

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

export default App;

 

useLocation

 

react-router-dom을 사용하면, 우리는 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다.

이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있다.

 

사용방법

// src/App.js

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

const App = () => {
  const location = useLocation();
  console.log(location);
  return (
    <div>
    </div>
  );
};

export default App;

 

결과

 

정리

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

 

 

Dynamic Route란?

 

동적 라우팅이라고도 하며, path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법이다.

 

예시

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;

이전과는 다르게 works/:id라고 path가 들어간다. :id라는 것이 바로 동적인 값을 받겠다라는 의미이다.

위 코드에서는 path를 동적으로 받고, 어떤 값이 들어오든 Works를 불러오게 되어있기 때문에 works/1로 이동해도 <Work/>로 이동하고, work/2.../3 모두 <Works>로 이동하게 된다.

 

그리고 :id는 useParams 훅에서 조회할 수 있는 값이 된다.

 

useParam

 

query parameter 조회하기

 

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

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

 

위에서 살펴본 바와 같이, Work 페이지 컴포넌트를 모두 동일하게 렌더링 할 것이다.

useParams를 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id값을 조회할 수 있다.

 

useparams는 path에 있는 id값을 조회할 수 있게 해주는 훅이다.

그래서 우리가 만약 works/1로 이동하면 1이라는 값을 주고, works/100으로 이동하면 100이라는 값을

사용할 수 있게 해준다.

 

// src/pages/Work.js

import React from "react";
// 아래 코드를 추가. 👇
import { useParams } from "react-router-dom";

const Work = () => {
	// 아래 코드를 추가. 👇
  const param = useParams();
		// 훅을 사용해서 생성한 param을 콘솔에 찍어보자.
  console.log(param);
  return <div>Work</div>;
};

export default Work;

works/1에 접속했다면 id:1이

works/100에 접속했다면 id:100이 출력될 것이다.

 

정리

• react-router-dom을 통해 Dynamic Route를 설정할 수 있다.
• Dynamic Route를 설정할때는 :id 로 설정하고, id 값은 useParams을 이용해서 각 컴포넌트에서 조회할 수 있다.