React 라우팅 재고하기: 더 간단하고 예측 가능한 접근법

Source: Dev.to

routexiz 소개

React용 가볍고 현대적인 라우터로, 직관적인 사고 모델을 제공합니다.
플랫 라우트 대신 routexiz는 앱을 트리 구조로 모델링합니다—각 라우트는 노드이며, 루트에서 모든 리프까지는 하나의 경로만 존재합니다.

// route definition
route("/", Layout, root => {
  root.route("/dashboard", Dashboard, dash => {
    dash.guard(authGuard);
    dash.middleware(trackPageView);
  });
});

장점

• 자연스러운 중첩 레이아웃
• 예측 가능한 실행 순서
• 앱이 성장함에 따라 명확한 구조

네비게이션

문자열을 추측하는 대신:

navigate("/users/1");

다음과 같이 작성합니다:

navigate("/users/:id", {
  params: { id: 1 }
});

문자열 추측 없이, 수동 보간도 필요 없습니다.

핵심 기능

• Suspense‑first 데이터 로딩
• 라우트‑레벨 가드 (네비게이션 차단)
• 미들웨어 (부수 효과)
• 프리페치 (호버 + 뷰포트)
• TTL을 가진 로더 캐싱
• 라우트별 에러 경계
• 내장 전환 효과

복잡한 API 없이 모두 제공됩니다.

예시: 로더 & 데이터 접근

route("/users/:id", User, {
  loader: async ({ params }) => fetchUser(params.id)
});

const data = useLoaderData(); // inside User component

단순하고 예측 가능하며 React Suspense와 원활하게 작동합니다.

설계 철학

목표는 단순히 기능 수로 경쟁하는 것이 아니라, 개발자 경험과 명료성을 제공하는 것입니다.

• Guard → “입장 가능 여부?”
• Middleware → “입장하면서 무언가 수행”

이러한 분리는 앱이 확장될 때도 깔끔함을 유지합니다.

이상적인 사용 사례

• 중첩 레이아웃이 있는 대시보드 구축
• 인증/권한을 깔끔하게 처리
• 부드러운 네비게이션을 위한 데이터 프리페치
• 대규모 앱에서 라우팅 로직을 예측 가능하게 유지

구현된 핵심 요소

• 타입‑안전 파라미터
• 중첩 라우팅 빌더
• 기본 devtools
• React 어댑터
• 문서 및 예제

현재 상태

생태계가 아직 초기 단계입니다. 이 접근 방식이 마음에 든다면 피드백을 주세요:

• 무엇이 직관적인가요?
• 무엇이 어색한가요?
• 프로덕션 사용을 위해 무엇이 부족한가요?

더 좋게—작은 프로젝트에 적용해보고 부셔보세요! 😄

NPM:
Live example:

마무리 생각

기존 라우터를 하루아침에 대체하려는 것이 아니라, 현대 React에서 라우팅을 더 간단하고 예측 가능하게 다루는 방법을 탐구하고 싶습니다. 흥미롭다면 함께 만들어봅시다.

현재 라우팅에서 가장 큰 불편함은 무엇인가요?