essential
↵ 선택 ↑↓ 탐색 ESC 닫기

검색 결과가 여기에 표시됩니다

essential

PJT_2. Disney Application_2

React Router DOM은 SPA 환경에서 History API를 기반으로 URL과 컴포넌트를 연결해, 새로고침 없이 페이지 전환·중첩 레이아웃·동적 라우팅까지 일관되게 관리할 수 있게 해주는 React 공식 라우팅 솔루션

1. React Router DOM이란?

“URL이 바뀌었는데, 페이지 새로고침 없이 화면을 전환하고 싶다.”

이 역할을 담당하는 라이브러리가 바로 React Router DOM이다.

React Router DOM은 👉 SPA(Single Page Application)에서 👉 URL에 따라 렌더링할 컴포넌트를 제어해주는 라이브러리다.

React 앱은 기본적으로 index.html 하나만을 사용한다. 즉, /about, /contact 같은 URL이 있어도 실제로는 페이지가 존재하지 않는다.

그럼에도 우리가 URL을 통해 페이지 이동을 하는 것처럼 느끼게 해주는 역할을 React Router DOM이 담당한다.


2. SPA(Single Page Application)와 라우팅

SPA의 특징은 다음과 같다.

  • 최초에 index.html 한 번만 로드
  • 이후 화면 전환은
    • 서버 요청 ❌
    • JS가 컴포넌트만 교체

즉, URL이 바뀌어도

  • HTML은 그대로
  • React가 “지금 이 URL엔 이 컴포넌트를 보여줘야겠네”라고 판단한다.

이 판단을 가능하게 해주는 핵심이 History API다.


3. BrowserRouter – 라우팅의 시작점

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

BrowserRouter의 역할

  • HTML5 History API 사용
    • pushState
    • replaceState
    • popstate
  • URL 변경을 감지
  • React Router에게 “URL이 바뀌었다”라고 알려줌

📌 한 줄 요약

BrowserRouter는 SPA에서 URL을 관리하는 엔진이다


4. Routes와 Route – URL과 컴포넌트 연결

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

Routes

  • 현재 URL과 일치하는 Route 하나만 렌더링
  • React Router v6부터 도입

Route

  • path: URL 경로
  • element: 렌더링할 컴포넌트

📌 v6 핵심 특징

예전처럼 여러 Route가 동시에 렌더링되지 않고, 가장 정확히 매칭되는 Route 하나만 선택된다.


5. Link – 새로고침 없는 페이지 이동

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

<Link to="/about">About</Link>
  • HTML <a> 태그와 유사
  • 하지만 페이지 새로고침 ❌
  • History API를 사용해 SPA 흐름 유지

📌 언제 Link를 쓰나?

  • 네비게이션
  • 메뉴 이동
  • 일반적인 화면 전환


6. 중첩 라우팅(Nested Routes)과 Outlet

실무에서 가장 많이 쓰이는 패턴은 레이아웃 + 페이지 구조다.

<Route path="/" element={<Layout />}>
  <Route index element={<Home />} />
  <Route path="teams" element={<Teams />} />
</Route>

Outlet

⬇ 자식 Route가 렌더링될 위치 없으면 하위 페이지가 보이지 않는다.

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

function Layout() {
  return (
    <>
      <Nav />
      <Outlet />
    </>
  );
}

📌 한 줄 요약

Outlet은 “여기에 하위 페이지를 꽂아라”라는 표시다


7. useNavigate – 코드로 페이지 이동

const navigate = useNavigate();

navigate("/home");
navigate("/success", { replace: true });
  • 로그인 후 이동
  • 조건에 따른 페이지 전환
  • replace: true → 뒤로 가기 방지


8. useParams – 동적 라우팅

<Route path="/movie/:id" element={<Detail />} />

여기서 핵심 👇

  • :movieId
    • 고정 문자열 ❌
    • URL 변수 자리

즉 Router에게 이렇게 말하는 거야:

“슬래시 뒤에 뭐가 오든 그 값을 movieId라는 이름으로 저장해”


9. useLocation – 현재 URL 정보

seLocation은 지금 브라우저 주소창에 있는 URL 정보를 그대로 들고 오는 훅이다.

const location = useLocation();

이렇게 하면 이런 객체를 받아 👇

{
  pathname: "/search",
  search: "?q=batman",
  hash: "",
  state: null,
  key: "abc123"
}

🔹 pathname

location.pathname
/*
/main
/search
/movie/123
*/
  • URL의 경로 부분
  • Route 매칭에 쓰이는 값

🔹 search

location.search
// "?q=batman&page=2"
  • 쿼리 스트링 전체 문자열 그대로 옴

🔹 hash

location.hash
// /docs#section3
  • # 뒤에 붙는 값

🔹 state

location.state

/*
navigate("/detail", {
  state: { from: "search" }
});
*/
  • URL에 안 보이는 데이터
  • 페이지 이동 시 함께 전달한 값
Photo of datatype

URL-based Search State Management

JayTak


10. useRoutes – 라우트를 JS로 관리

useRoutes는 JSX로 쓰던 <Route>들을 JS 객체(설정) 형태로 관리하게 해주는 훅이다.

const element = useRoutes([
  { path: "/", element: <Dashboard /> },
  { path: "team", element: <Team /> },
]);

👉 라우트가 늘어나면 App.jsx가 비대해짐 👉 조건부 라우팅, 권한 분기 어려움

그래서 등장한 게 useRoutes.

useRoutes는 이렇게 생겼음

const element = useRoutes([
  {
    path: "/",
    element: <Layout />,
    children: [
      { index: true, element: <LoginPage /> },
      { path: "main", element: <MainPage /> },
      { path: "search", element: <SearchPage /> },
      { path: ":movieId", element: <DetailPage /> },
    ],
  },
]);

그리고 렌더링은 딱 한 줄 👇

return element;

📌 <Routes> / <Route> 전부 사라짐



Development
React