wouter

wouter란?

wouter는 React를 위한 초경량 클라이언트 사이드 라우터입니다.
기본적인 라우팅만 제공하며, 크기와 API를 최소화한 것이 특징입니다.

• 크기: 약 3KB (gzip 기준)
• 철학: "필요한 것만. 작고 단순하게."
• 형태: Hook 기반 라우터 (React Router처럼 JSX 컴포넌트 기반이 아님)

---

핵심 특징

1. 아주 작은 번들 사이즈

• 성능에 민감한 앱(예: 3D/Canvas/모바일)에 적합
• 추가 의존성 거의 없음

2. 훅(Hook) 기반 API

• useLocation, useRoute 등 React Hook으로 라우팅 처리
• 함수형 컴포넌트에 잘 어울림

3. 선언적 & 간단한 라우팅 구성

<Route path="/about" component={AboutPage} />

4. 커스텀 라우터 구성 가능

• 해시 라우터, 메모리 라우터 등 직접 정의 가능 (Router 컴포넌트)

5. React의 상태와 완전히 연동

• 상태 기반으로 라우팅을 제어하거나 감지 가능

---

기본 구조

import { Route, useLocation } from 'wouter';

function App() {
  const [location, setLocation] = useLocation(); // 현재 경로

  return (
    <>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/item/:id">{(params) => <ItemPage id={params.id} />}</Route>
    </>
  );
}

---

비교 요약 (React Router 대비)

Bundle Size	🔹 작다 (~3KB)
기능 수	🔸 매우 최소
사용 난이도	🔹 간단함
SSR	❌ 기본 미지원
라우팅 방식	🔹 Hook 중심
상태 관리와 연동	🔹 쉬움
실무 적합성	🔸 소규모, 빠른 프로토타입, 퍼포먼스 민감 앱에 적합

---

wouter의 주요 기능 (핵심 사용 목적)

1. 클라이언트 사이드 라우팅

• <Route path="/about" component={About} />
• URL 경로에 따라 React 컴포넌트를 조건부로 렌더링

---

2. 동적 라우트 매칭

• <Route path="/post/:id">{(params) => <Post id={params.id} />}</Route>
• /post/123 → params.id === "123"
• RESTful URL 구조를 지원

---

3. 현재 경로 조회 및 변경 (useLocation)

• const [location, setLocation] = useLocation();
• setLocation('/about') → 프로그래밍 방식의 페이지 이동
• 상태 기반 라우팅 제어 가능

---

4. URL 경로 일치 여부 판단 (useRoute)

• const [match, params] = useRoute('/post/:id')
• 현재 URL이 해당 경로와 일치하면 match는 true, params는 추출된 값

---

5. 라우터 타입 선택 가능 (<Router>)

• 기본 브라우저 히스토리 외에도:
  • hash-based routing (/index.html#/about)
  • memory routing (테스트/비시각적 라우팅)
• 커스텀 라우터 설정 가능 (예: <Router base="/docs">)

---

 

wouter의 세부 기능

1. Switch

• 여러 <Route> 중 하나만 렌더링 (순서 중요)

import { Switch, Route } from 'wouter';

<Switch>
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  <Route>404 Not Found</Route> {/* catch-all */}
</Switch>

---

2. Redirect

• 특정 경로에서 자동으로 다른 경로로 리디렉션

import { Redirect } from 'wouter';

<Route path="/old-path">
  <Redirect to="/new-path" />
</Route>

---

3. base path 설정

• 서브디렉토리 배포용 베이스 경로 설정

import { Router } from 'wouter';

<Router base="/my-app">
  <App />
</Router>

---

4. custom history 객체 사용

• 기본 history 대신 커스텀 구현 가능 (SPA 프레임워크 통합 시 유용)

import { Router } from 'wouter';
import { createHashHistory } from 'history';

const hashHistory = createHashHistory();

<Router hook={hashHistoryHook(hashHistory)}>
  <App />
</Router>

---

5. query string 처리 (간접 지원)

• wouter는 쿼리 문자열을 따로 파싱하지 않음
  → useLocation으로 경로 문자열 받아서 URLSearchParams로 직접 처리

const [location] = useLocation();
const query = new URLSearchParams(location.split('?')[1]);
const q = query.get('q');

---

6. lazy-loading과 코드 스플리팅

• React.lazy 및 Suspense와 함께 사용 가능

const About = lazy(() => import('./About'));

<Route path="/about">
  <Suspense fallback={<div>Loading...</div>}>
    <About />
  </Suspense>
</Route>

---

7. useRoute match fallback

• 매칭되지 않으면 false 반환되어 조건부 렌더링에 유용

const [match] = useRoute('/admin');
if (!match) return null;