react-router-dom (2/2) 다양한 함수들

manNomi·2025년 1월 1일

WEB

목록 보기

9/9

1. Router 관련 함수

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

<BrowserRouter>
  <App />
</BrowserRouter>

가장 기본적인 형태로 history 를 이용해서 관리 !

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

<HashRouter>
  <App />
</HashRouter>

URL의 # 뒤에 경로를 추가하여 페이지를 구분.
서버가 항상 index.html 파일 하나만 제공하고, 다른 경로(/page1, /about)를 요청해도 서버는 추가 파일을 반환하지 않는 방식 서버에서 주소를 옮기지 못할때 주로 사용한다 아래는 그 예시입니다
1. 서버 설정에 제한이 있을 때
  
  • 정적 호스팅 서비스(예: GitHub Pages, S3)에서 React 앱을 배포할 때 유용합니다.
  
  • 이 경우, 서버가 URL 경로를 인식하지 못하므로 Browser Router 대신 Hash Router를 사용해야 정상 작동합니다.
2. 단순한 프로젝트를 빠르게 배포할 때
  
  • 초기 프로젝트나 간단한 SPA(Single Page Application)를 개발할 때, 서버 설정 없이 빠르게 배포할 수 있습니다.
3. SEO(Search Engine Optimization)가 중요하지 않을 때
  
  • Hash Router를 사용하면 검색 엔진이 # 이후의 내용을 제대로 인식하지 못하므로 SEO에는 적합하지 않습니다.
  
  • 하지만 SEO가 필요 없는 내부 관리 도구나 대시보드 프로젝트라면 큰 문제가 없습니다.
  
  1) /profile/userIDx (Browser Router)
  
  • 브라우저는 URL 전체를 서버로 요청합니다.
4. 브라우저가 /profile/userIDx를 서버에 요청.
5. 서버는 /profile/userIDx 요청을 처리해야 합니다.
  
  • 서버 설정 필요: 이 경로를 React 앱의 index.html로 리다이렉트하도록 설정.
  
  • 서버 설정이 없다면, 404 Not Found 오류 발생.
6. React 앱이 실행되면 Browser Router가 경로(/profile/userIDx)를 보고 렌더링할 컴포넌트를 결정.
  
  • 장점:
  
  • URL이 깔끔하고, SEO(검색 엔진 최적화)가 가능.
  
  • 단점:
  
  • 서버 설정이 필요함. (모든 경로를 React 앱으로 리다이렉트해야 함.)
  
  2) /profile/#/userIDx (Hash Router)
  
  • 브라우저는 # 이전 부분만 서버로 요청합니다.
7. 브라우저가 /profile만 서버에 요청.
8. 서버는 항상 index.html 파일을 반환.
9. React 앱의 Hash Router가 #/userIDx를 읽고, 렌더링할 컴포넌트를 결정.
  
  • 장점:
  
  • 서버 설정이 필요 없음. (정적 HTML 파일만 제공하면 동작.)
  
  • GitHub Pages, AWS S3 등 정적 호스팅에서도 문제 없이 작동.
  
  • 단점:
  
  • URL이 #를 포함해 다소 덜 깔끔.
  
  • SEO(검색 엔진 최적화)가 되지 않음. 검색 엔진은 # 이후 내용을 무시함.

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

<MemoryRouter initialEntries={['/home']} initialIndex={0}>
  <App />
</MemoryRouter>

URL을 실제 브라우저 주소창에 반영하지 않고, 메모리에서만 관리하는 라우팅 방식
주로 테스팅에서 사용합니다
메모리 기반 라우팅: URL을 메모리에서만 관리하며, 브라우저 주소창에는 변화가 없습니다.
Memory Router는 일종의 전역 상태 관리처럼 작동합니다. 라우팅 정보를 브라우저 히스토리나 URL 대신 메모리(전역 상태)에 저장하여, 내부적으로 상태를 관리합니다.

2. Routes와 Route 관련

2.1 Routes

여러 Route를 그룹화하여 라우팅을 관리.
React Router v6부터 사용.

import { Routes, Route } from "react-router-dom";

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

2.2 Route

경로와 렌더링할 컴포넌트를 매핑.
동적 경로와 중첩 라우팅도 지원.

<Route path="/profile/:userId" element={<Profile />} />

Routes 와 Route 차이를 알아보자

Routes는 여러 Route를 감싸서 경로와 컴포넌트를 연결하는 컨테이너입니다.
Route는 각 경로를 정의하며, Routes 내부에 위치해야 동작합니다.

Routes 를 이용하면 계층 라우팅을 할 수 있습니다.

계층라우팅이란 ? → React Router에서 라우트(경로)를 계층 구조로 설계하는 방법으로, 중첩된 페이지 구조를 URL 경로와 매핑하여 구현

라우트 중첩:

부모 라우트와 자식 라우트를 계층적으로 설정하여, 공통 레이아웃을 공유하거나, 부모 컴포넌트 내부에서 자식 컴포넌트를 렌더링합니다.

Outlet 컴포넌트 사용:

부모 라우트에서 자식 라우트를 렌더링할 위치를 지정하는 역할을 합니다.
자식 라우트의 결과가 부모 컴포넌트의 Outlet 위치에 삽입됩니다.

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

const App = () => {
  return (
    <Routes>
      {/* 부모 라우트 */}
      <Route path="/" element={<Layout />}>
        {/* 자식 라우트 */}
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
};

const Layout = () => (
  <div>
    <h1>공통 레이아웃</h1>
    {/* 자식 라우트를 렌더링할 위치 */}
    <Outlet />
  </div>
);

const About = () => <div>About Page</div>;
const Contact = () => <div>Contact Page</div>;

위와 같이 layout을 만들어서 중첩 시켜 자식요소로 쓸 수 있습니다.

굳이 사용하자면 아래와 같이 pc 모바일 버전을 만들때 사용할 수 있을것 같기도 합니다.

app에서 page/index.js 를 import 하고 page/index.js 의 style을 설정하는게 더 좋아보이긴합니다.

import { Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";

const App = () => {
  return (
    <Routes>
      {/* Layout에서 PC/Mobile 구분 */}
      <Route path="/*" element={<Layout />}>
        {/* 하위 라우트 정의 */}
        <Route path="home" element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
};

export default App;

3. 네비게이션 함수

3.1 useNavigate

• 프로그래밍적으로 경로를 변경.

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

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

  const goToHome = () => navigate("/");
  const goBack = () => navigate(-1);

  return <button onClick={goToHome}>홈으로 이동</button>;
};

useNavigate는 React Router에서 제공하는 프로그램적 라우팅을 위한 훅(Hook)입니다.

React Router의 라우팅 시스템을 통해 페이지를 리로드하지 않고 컴포넌트를 전환할 수 있습니다.

특징

SPA 방식의 라우팅:

• 브라우저가 페이지를 리로드하지 않고, React가 라우팅을 처리하여 컴포넌트를 전환.

상태 유지:

• 현재 React 상태가 유지되며, 페이지 이동 시 전체 앱 상태가 초기화되지 않음.

동적 라우팅 가능:

• 이벤트 핸들러 내에서 조건에 따라 동적으로 경로를 이동할 수 있음.

애니메이션과 통합 가능:

• 페이지 전환 시 애니메이션 효과 등을 쉽게 추가 가능.

위와 같은 특징은 a태그와의 차이가 있습니다.

3.2 Link

• 네비게이션을 위한 링크 컴포넌트.

• 브라우저 새로고침 없이 경로를 변경.

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

<Link to="/about">소개</Link>

3.3 NavLink

• Link와 유사하지만, 활성 상태를 표시할 수 있는 컴포넌트.

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

<NavLink to="/about" activeClassName="active">
  소개
</NavLink>

useNavigate의 태그 버전 = Link
Link의 active State 포함된 확장버전 = NavLink이다

useNavigate

→ 조건부 경로 이동이 필요할 때.
→ 버튼 클릭이나 특정 이벤트에서 경로를 동적으로 전환할 때.
Link
→ 네비게이션 바처럼 정적인 경로 이동이 필요할 때.
NavLink
→ 활성화된 경로를 표시해야 할 때.
→ 예 네비게이션에서 현재 활성화된 페이지를 강조.

4. URL 상태 관리 함수

4.1 useParams

• 동적 경로(:id)의 파라미터 값을 추출.

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

const Profile = () => {
  const { userId } = useParams();
  return <div>사용자 ID: {userId}</div>;
};

4.2 useSearchParams

• URL 쿼리 문자열을 읽거나 수정.

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

const Search = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("query");

  return (
    <div>
      <p>검색어: {query}</p>
      <button onClick={() => setSearchParams({ query: "react" })}>React 검색</button>
    </div>
  );
};

4.3 useLocation

• 현재 URL 정보(pathname, search, hash 등)를 반환.

→ pathname : URL의 경로 부분 순수 url

→ search : URL의 쿼리 문자열(Query String)

→ hash : #로 시작하며, 보통 페이지 내 특정 위치로 스크롤하거나 앵커 링크 역할

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

const CurrentLocation = () => {
  const location = useLocation();
  return <p>현재 경로: {location.pathname}</p>;
};

4.4 useMatch

• 특정 경로와 현재 URL이 일치하는지 확인.

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

const MatchExample = () => {
  const match = useMatch("/about");
  return <div>{match ? "About 페이지입니다." : "다른 페이지입니다."}</div>;
};

5. 리다이렉션 함수

5.1 Navigate

• 특정 조건에서 경로를 리다이렉트.

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

const ProtectedPage = ({ isLoggedIn }) => {
  return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
};

→ Link태그의 trigger는 클릭

→ Navigate는 그 컴포넌트 렌더링 자체가 리다이렉션으로 간다

6. 기타 함수

6.1 Outlet

• 중첩 라우트에서 하위 경로의 컴포넌트를 렌더링.

→ 자리 표시자(placeholder)” 역할

→ children 같은 역할을 합니다

const Dashboard = () => {
  return (
    <div>
      <h1>대시보드</h1>
      <Outlet />
    </div>
  );
};

6.2 useRoutes

• 객체 기반 라우트 설정.

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

const routes = [
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
];

const App = () => {
  const routing = useRoutes(routes);
  return routing;
};