[React 스터디] React Router Dom

Router

react-router를 사용하기 전에 Router의 기본적인 내용만 훑고 가보자.

 

Routing

라우팅이란 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.

주소(URL)의 파라미터로 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜주는 작업이라 보면 될 것 같다.

 

React Router

설치 및 세팅

패키지를 설치하자.

yarn add react-router-dom

 

import { BrowserRouter, Routes, Route } from 'react-router-dom'

위는 가장 많이 사용되는 모듈 3가지다.

 

BrowserRouter

• history API를 활용해 history 객체를 생성한다.
• history API는 내부적으로 stack 자료구조의 형태를 띄우며 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다.
• 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다.

 

Route

• 현재 브라우저의 location(window.href.location) 상태에 따라 다른 element를 렌더링 한다.
• Route.element : 조건이 맞을 때 렌더링할 element, <Element /> 형태로 전달된다.
• Route.path : 현재 path값이 url과 일치하는 지 확인해 해당 url에 매칭된 element를 렌더링 한다.

 

Routes

• 모든 Route의 상위 경로에 존재해야 하며, location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아준다.

 

아래와 같은 방식으로 세팅하면 된다.

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;

 

 

후에 App.jsx에서 Router를 넣어주자.

import "./App.css";
import Router from "./Router";

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

export default App;

 

사용법

Link

Link 컴포넌트는 라우터 내에서 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트다.

앵커 태그라고 생각하면 된다.

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

function Nav(){
  return (
    <div>
      <Link to='/'> Home </Link>
      <Link to='/about'> About </Link>
    </div>
  );
}

export default Nav;

 

useLocation 훅과 연계하여 특정 state를 넘겨주는 것도 가능하다.

<Link to="new-path" state={{ some: "value" }} />

let { state } = useLocation();

 

useNavigate

여러 이벤트 등으로도 라우팅을 할 수 있는데, 그때 사용 되는게 useNavigate 훅이다.

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const onClick = () => {
	navigate('/')
}

 

아래는 추가할 수 있는 속성이다.

// replace
// 기본값은 false이고, true로 설정한다면 이동 후 뒤로가기가 불가능해진다.
navigate("/", { replace: true });

// state
// Link와 마찬가지로 state를 전달해줄 수 있다
navigate("/", { state: { cardId: cardId } });

const location = useLocation();
const { cardId } = location.state;

 

 

중첩 라우팅

<Route path="/about" element={<About />}>
  <Route path="location" element={<Location />}></Route>
</Route>

라우터 내부에서 자식 요소 Route를 만들어주면, 내부적으로 /about 주소 하위 /locateion 이라는 하위 라우팅이 되었다고 판단한다. 따라서 /about/location으로 이동할 경우, 주어진 location 컴포넌트가 렌더링 되는 것이다. 물론 About도 같이 렌더링 된다.

 

이때 부모 요소인 About 페이지에 하위 라우팅 컴포넌트를 렌저링할 자리를 명시해주어야 하는데 이때 사용되는 것이 Outlet 컴포넌트다.

 

Outlet

import { Outlet } from 'react-router-dom';

function About() {
  return (
    <div>
      <div>
        <h2>여기는 About 페이지입니다.</h2>
        <p>대충 쇼핑몰 페이지라는 뜻</p>
      </div>
      <Outlet />
    </div>
  );
}

 

물론 Outlet 없이 편하게 중첩 라우팅을 할 수 있다.

라우터에서 중첩 라우팅을 할 path에 *을 표시하고 중첩 라우팅을 사용한다고 명시해준다.

<Routes>
  <Route path="/" element={<Home />}></Route>
  <Route path="/about/*" element={<About />}></Route>
  <Route path="/products" element={<Products />}></Route>
</Routes>

 

이후 부모 컴포넌트에서 Outlet이 들어 갓던 자리에 Routes를 추가 해주면 된다.

function About() {
  return (
    <div>
      <div>
        <h2>여기는 About 페이지입니다.</h2>
        <p>대충 쇼핑몰 페이지라는 뜻</p>
      </div>
      <Routes>
        <Route path="/location" element={<Location />}></Route>
      </Routes>
    </div>
  );
}

 

 

Params

url 파라미터

주소 경로 내부에 특정 데이터를 넣어 전달하는 것을 말하는데, 크게 url 파라미터와 쿼리스트링으로 나누어진다.

<Route path="/new/:id" element={<NewId />} />

여기에서 :(콜론) 으로 구분해준 id라는 값은 파라미터로 전달되어 이후 NewId 컴포넌트 내부에서 useParam훅을 통해 추출하고 사용할 수 있다.

 

쿼리스트링

?, & 을 기준으로 key와 value를 나누어 데티터를 전달받고, 이렇게 전달 받은 값은 이후 useLocation훅을 통해 추출하고 사용할 수 있다.

useSearchParams 훅을 사용하면 쉽게 처리할 수 있다.

 

useParams

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

const NewId = () => {
  let { id } = useParams();

  return (
    <div className="test">
      <p>현재 유저의 아이디는 { id } 입니다.</p>
    </div>
  )
}

export default NewId;

 

 

useSearchParams

쿼리스트링을 추출하는 데 사용되며, 현재 위치에 대한 url의 쿼리스트링을 읽고 수정할 때 사용된다.

const [serchParams, setSearchParams] = useSearchParams();

URLSearchParams의 객체이면서 쿼리스트링을 다루기 위한 다양한 메서드를 내장하고 있다.

함수의 인자에 객체와 문자열을 넣어주면 현재 url의 쿼리스트링을 변경한다.

// 인자로 전달한 key 값을 value로 설정한다. 만일 기존에 key에 대한 값이 존재했다면 덮어씌운다.
searchParams.set(key, value)

// 기존 값을 변경 혹은 삭제하지 않고 추가한다.
searchParams.append(key, value)

이는 페이지 네이션이나 키워드 검색, 정렬 등 다양한 곳에서 용이하게 사용된다.