React Routing

SPA 방식의 어플리케이션에서 여러 페이지를 처리할 수 있도록 도와주는 react-router-dom 라이브러리를 활용해보며, 리액트 라우팅에 대해 이해해봅시다.

라우팅(Routing)이란?

사용자가 요청한 URL(주소)에 맞는 페이지를 보여주는 것!
리액트 자체에는 라우팅 기능이 내장되어 있지 않음!
따라서, 라이브러리를 설치하여 라우팅 기능을 구현해주어야 함!

리액트는 SPA(Single Page Application) 방식으로 렌더링!
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
react-router-dom은 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리!

react-router-dom 활용하기

설치하기

(주의) react-router-dom v5 버전이 아닌 v6를 사용합니다!!

npm i react-router-dom

v5 버전임을 어떻게 알 수 있을까요?

useHistory Hook을 사용 ⇒ v6에서는 useNavigate Hook을 사용함
<Switch> ⇒ <Routes>
등 둘의 차이점의 경우에 구글링 해보시면 좋을 것 같습니다.
참고자료

라우트 정의하기

<BrowerRouter>

라우터 역할 담당
새로고침 하지 않아도 새로운 컴포넌트를 렌더링 해주는 역할을 담당
라우팅에 포함시킬 페이지들은 모두 <BrowserRouter> 컴포넌트로 감싸줘야 한다.

<Routes> & <Route>

<Routes> 컴포넌트는 여러 Route를 감싸서 그 중 경로가 일치하는 Route 단 하나만을 렌더링 시켜주는 역할을 함
모든 Route에 공통으로 들어가는 요소가 있다면, <Routes> 밖으로 빼주면 됨. (ex. Header.jsx)
<Route> 태그의 path 속성에는 경로, element 속성에는 해당 경로에 띄워줄 컴포넌트를 넣어준다.
특정 컴포넌트에 여러 경로를 매칭하고 싶을 때에는, url 뒤에 *을 붙여준다. (ex. NotFound.jsx)

// src/App.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header from "./containers/Header";
import Course from "./pages/Course";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Roadmap from "./pages/Roadmap";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/courses" element={<Course />} />
        <Route path="/roadmaps" element={<Roadmap />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default

페이지 이동하기

페이지 이동은 크게 2가지 방법으로 수행할 수 있습니다.

<Link> 태그 사용하기

<Link>는 클릭 시 바로 이동하는 로직 구현 시에 사용 GOOD

DOM에서 a 태그로 변환

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

<Link to="/">로고</Link>

useNavigate Hook 사용하기

useNavigate는 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 사용 GOOD
Hook이 반환해준 함수를 navigate 라는 변수에 저장 후, 해당 함수의 인자에 path 값을 넘겨주면 해당 경로로 이동
- navigate(경로) : 해당 경로로 이동
- navigate(-1) : 한 페이지 뒤로 가기
- navigate(1) : 한 페이지 앞으로 가기
```
export default function Roadmap() {
  const navigate = useNavigate();

  return (
    <div>
      <h1>로드맵 화면입니다!!</h1>
      <button onClick={() => navigate('/')}>홈화면으로 이동하기</button>
    </div>
  );
}
```

🤔 <Link> 태그 대신 <a> 태그는 사용할 수 없나요?

두 태그의 차이점은 페이지 이동 시 페이지 새로고침 발생 유무입니다.

<Link>는 브라우저의 주소만 변경할 뿐 페이지 자체를 새로고침하지 않습니다.
반면, <a>태그는 브라우저의 주소를 변경하면서 페이지를 새로고침합니다.

새로고침 발생 유무가 왜 중요한가요….?

페이지가 새로고침되면 현재 렌더링되어 있는 컴포넌트들이 모두 사라지고 새로 컴포넌트가 렌더링되게 됨!
이렇게 되면 기존 컴포넌트의 state 값들이 모두 날아가게 됨😅
<Link> 태그로는 페이지 이동 시에도 컴포넌트의 state 값 보존이 가능하지만, <a> 태그는 그렇지 못함.
따라서! 프로젝트 내부 페이지 이동은 <Link> 태그로, 외부 페이지로의 이동은 <a> 태그로 수행하는 것이 적절함!

페이지 이동 시 데이터 전달하기

👉🏻 useNavigate로 props 전달하기 & useLocation으로 전달받은 props 꺼내기

// props 전달하기
// navigate(이동할 url, 전달할 인자)
navigate('/', { state: nickname })

// props 값 꺼내기
const { state } = useLocation();

hash: url의 # 문자열 뒤의 값
key: location 객체의 고유 값
pathname: 현재 주소의 경로 (쿼리 스트링 제외)
search: 맨 앞의 ? 문자를 포함한 쿼리 스트링 값
state: 페이지 이동할 때 임의로 넣을 수 있는 상태 값

👉🏻 url 파라미터로 값 전달하고, useParams로 파라미터 값 꺼내기 (동적 라우팅)

<BrowserRouter>
  <Routes>
    <Route path="/movie/:title" element={<MovieDetail />} />
  </Routes>
</BrowserRouter>

// 값 전달하는 컴포넌트
import { useNavigate } from 'react-route-dom';

const navigate = useNavigate();

navigate(`/movie/${movieTitle}`)

// 값 꺼내오는 컴포넌트
import { useParams } from 'react-route-dom';

const { title } = useParmas();

👉🏻 쿼리 스트링으로 값 전달하기

// 값 전달하는 컴포넌트
import { useNavigate } from 'react-route-dom';

const navigate = useNavigate();

navigate(`/courses?s=${keyword}&author=찰스`);

// qs(쿼리스트링) 파싱 라이브러리 설치하기
npm i qs

// 값 꺼내오는 컴포넌트
// 쿼리스트링 파싱에는 qs 라이브러리를 사용함(npm i qs)
import { useLocation } from 'react-router-dom'
import QueryString from "qs";

const location = useLocation();
const queryData = QueryString.parse(location.search, {
  ignoreQueryPrefix: true,
});
console.log(queryData.s);

PreviousReact Hooks NextStyled-Components

Last updated 2 years ago