React Router v7 (Library) 똑같이 구현하기

개요

저는 그동안 리액트 앱을 만들 일이 생기면 Next.js만 사용해왔습니다. 가장 큰 이유는 Next.js의 파일 기반 라우팅이 굉장히 편해 개발 속도가 빨랐기 때문입니다.

그러다 최근 회사에서 라우팅 라이브러리로 React Router를 채택하게 되었습니다. 간단하게 사용해봤는데 파일 기반 라우팅은 아니지만 그래도 생각보다 적응을 빠르게 할 수 있었습니다. 직접 구현해보면 작동 원리를 더욱 깊게 이해할 수 있을 것 같아 클론 코딩을 해보았습니다.

직접 구현한 React Router 체험해보기: https://react-router.geniuslhs.com

구현 목표

구현 목표는 React Router v7의 라우팅 컴포넌트를 똑같이 만드는 것입니다. 이는 구체적으로 세 단계로 나눌 수 있습니다.

기본적인 라우팅

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

각 <Route> 컴포넌트에 path 및 element 속성을 사용하여 어디에 어떤 컴포넌트가 렌더링 될지를 정할 수 있습니다. 이를 구현하면서 페이지 이동을 편리하게 해주는 useNavigation이나 경로를 알 수 있는 usePath 등의 훅들을 만들 것입니다.

Nested Routes

<Router>
  <Routes>
    <Route path="fruit" element={<Fruit />}>
      <Route index element={<FruitIndex />} />
      <Route path="apple" element={<Apple />} />
    </Route>
  </Routes>
</Router>

다음으로는 라우팅을 중첩할 수 있는 Nested Routes를 구현합니다. 위의 예시에서 <Fruit /> 컴포넌트는 레이아웃의 역할을 하며, react-router에서 제공하는 <Outlet /> 컴포넌트를 사용해서 하위 컴포넌트가 어디에 렌더링될지 지정할 수 있습니다. 또한 element 속성만 존재하는 Layout Routes, path 속성만 존재하는 Route Prefixes도 사용할 수 있습니다.

Dynamic Routes

<Router>
  <Routes>
    <Route path="teams/:teamId" element={<Team />} />
  </Routes>
</Router>

마지막으로 동적으로 라우팅을 할 수 있는 Dynamic Routes를 구현합니다. <Team /> 컴포넌트에서는 useRarams 훅을 사용하여 URL에서 파싱된 값을 얻을 수 있습니다. 이외에도 ? 문자를 사용하여 경로의 일부 구간을 선택적으로 만들 수 있는 Optional Segments, * 문자를 사용하여 /* 뒤로 나오는 임의의 문자열을 매칭할 수 있는 Splats도 구현합니다.

1. 기본적인 라우팅 구현

문제를 간단하게 하기 위해 path 속성이 완전한 경로를 나타내는, 아래와 같은 코드가 작동하도록 구현해보겠습니다.

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

컴포넌트가 많아 복잡해보이지만, 핵심은 간단합니다. path에 맞는 Route 컴포넌트를 찾아 그것의 element를 보여주는 것입니다. 이를 상기하면서 Route 컴포넌트를 작성해보면 다음과 같습니다.

components/Route.tsx

export interface RouteProps {
  path: string;
  element: React.ReactNode | null;
}
 
export default function Route({ path, element }: RouteProps) {
  if (path === window.location.pathname) {
    return element;
  } else {
    return null;
  }
}

그리고 아래와 같이 사용해주면 경로에 따라 올바른 컴포넌트를 보여줍니다.

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

너무나 간단하게 구현했습니다. 그러나 이 방법은 문제점이 있습니다. 예를 들어 "/" 경로에서 "/about" 경로로 이동하고 싶은 경우를 생각해보겠습니다. 만약 <a> 태그를 사용해 이동한다면, 다시 해당 주소로 http 요청을 보내고, css·js 파일들을 다시 받고, 이미지들을 다시 다운받고... 모든 과정이 반복됩니다. 우리는 이를 원하지 않습니다. 다시 http 요청을 보내지 않고도 클라이언트 안에서 라우팅을 처리하기를 원합니다. 즉, "주소"를 하나의 상태 값으로 관리해야 합니다.

<Router> 컴포넌트

주소를 상태 값으로 가지는 컴포넌트는 모든 <Route> 컴포넌트보다 상위에 있어야 합니다. 새로운 컴포넌트를 만드는 것이 자연스럽습니다.

components/Router.tsx

export interface RouterProps {
  children: React.ReactNode | null;
}
 
export default function Router({ children }: RouterProps) {
  const [path, setPath] = useState(window.location.pathname);
 
  return children; // 자식에게 path 상태 값을 전달해야 한다.
}

주소를 상태 값 path로 가지는 컴포넌트 <Router>를 만들었습니다. 이 때 초기값은 처음 웹사이트에 접근한 경로를 사용합니다. 이제 <Router> 컴포넌트의 자식들은 이 path 상태 값을 사용해 렌더링을 진행하면 됩니다.

부모 컴포넌트는 자식들의 구체적인 구조에 대해 알 수 없습니다. 이런 경우에 자식에게 상태 값을 넘겨주기 위해서는 리액트의 Context API를 사용하면 됩니다.

context/RouterContext.ts

type RouterContextType = {
  path: string;
  changePath: (path: string) => void;
};
 
export const RouterContext = createContext<RouterContextType>({
  path: "",
  changePath: () => {},
});
 
export const useRouterContext = () => {
  const routerContext = useContext(RouterContext);
 
  if (routerContext === undefined) {
    throw new Error("useRouterContext must be used within a RouterContext");
  }
 
  return routerContext;
};

주소 상태 값 path와 주소 변경용 함수 changePath를 가지고 있는 RouterContext를 만들었습니다. 이 컨텍스트를 <Router> 컴포넌트에 적용시켜주겠습니다.

components/Router.tsx

export interface RouterProps {
  children: React.ReactNode | null;
}
 
export default function Router({ children }: RouterProps) {
  const [path, setPath] = useState(window.location.pathname);
 
  return (
    <RouterContext.Provider value={{ path, changePath }}>
      {children}
    </RouterContext.Provider>
  );
}

그리고 <Route> 컴포넌트들은 이 컨텍스트를 받아 자신의 path 속성이 현재 주소와 같은지 비교하면 됩니다.

components/Route.tsx

interface RouteProps {
  path: string;
  element: React.ReactNode | null;
}
 
export default function Route({ path, element }: RouteProps) {
  const { path: currentPath } = useRouterContext();
 
  if (path === currentPath) {
    return element;
  } else {
    return null;
  }
}

현재까지 완성된 코드 사용법은 다음과 같습니다.

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

<Routes> 컴포넌트 구현

지금까지 <Router>와 <Route> 컴포넌트 만으로 라우팅을 구현했습니다. 그러나 React Router에서는 <Routes> 컴포넌트가 이들 사이에 추가로 존재합니다. 이 컴포넌트의 역할은 무엇이고, 왜 굳이 만들어 놓은걸까요?

사실 지금처럼 <Route> 컴포넌트가 중첩되어있지 않다면 현재의 구현만으로도 충분합니다. 각 <Route> 컴포넌트는 자신의 필요 여부를 완벽하게 판단 가능할 수 있기 때문입니다. 그러나 <Route> 컴포넌트가 중첩되기 시작한다면 이야기가 달라집니다. 다음 예시를 보겠습니다.

<Router>
  <Route path="nested" element={<Nested />}>
    <Route path="about" element={<About1 />} />
  </Route>
  <Route path="about" element={<About2 />} />
</Router>

위와 같이 중첩된 구조에서, path 속성 값이 "about"인 각 컴포넌트는 주소 값만을 보고 자신이 사용되는지 여부를 판별할 수 있을까요? 결론부터 말하자면 전혀 알 수 없습니다. 위의 예시에서 만약 접근한 주소가 "/nested/about" 이라면 둘 중 위의 <Route> 컴포넌트가 사용되어야 합니다. 이를 알기 위해서 위의 <Route> 컴포넌트는 부모 컴포넌트의 path 속성 값이 "nested"임을 알아야 하는데, 이는 결코 불가능합니다.

그래서 주소 값에 따라 어떤 <Route> 컴포넌트들을 렌더링할지 결정하는 새로운 컴포넌트가 필요합니다. 이들은 <Route> 컴포넌트들의 구조를 알아야 하므로 모든 <Route> 컴포넌트의 부모여야 합니다. 또한 path 상태 값을 사용해야 하므로 <Router> 컴포넌트의 자식이어야 합니다. 이 컴포넌트를 <Routes>라고 하면, 모든 퍼즐이 맞아 떨어집니다.

이 작업은 밑에서 Nested Routes를 구현할 때 하는 것이 흐름상 더 올바르긴 합니다. 이번 챕터에서 전체적인 틀을 다진다고 생각하고 미리 구현하겠습니다.

<Routes> 컴포넌트를 구현해보겠습니다. 일단 지금은 중첩되어있지 않은 상황을 구현하는 것이므로, 간단하게 자식들을 순회하면서 같은 경로 속성 값을 가진 자식의 element를 보여주면 됩니다.

components/Routes.tsx

interface RoutesProps {
  children: React.ReactNode | null;
}
 
export default function Routes({ children }: RoutesProps) {
  const { path } = useRouterContext();
 
  let element = null;
 
  for (const child of Children.toArray(children)) {
    if (isValidElement<RouteProps>(child) && child.props.path !== path) {
      element = child.props.element;
      break;
    }
  }
 
  return element;
}

이러면 <Route> 컴포넌트는 속성 값을 제공하는 것 외에 역할이 없어졌습니다. 그냥 null을 반환하도록 정리합니다.

components/Route.tsx

interface RouteProps {
  path: string;
  element?: React.ReactNode | null;
}
 
export default function Route({ path, element }: RouteProps) {
  return null;
}

이제 라우팅은 아래와 같은 형식으로 사용할 수 있습니다.

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

useNavigate 훅 구현

한 페이지에서 다른 페이지로 이동하고 싶을 때 사용할 수 있는 useNavigate 훅을 만들어보겠습니다. 위에서 만든 RouterContext를 사용하면 쉽게 구현할 수 있습니다.

hooks/useNavigate.ts

export const useNavigate = () => {
  const { path, changePath } = useRouterContext();
 
  const navigate = useCallback(
    (nextPath: string) => {
      if (path === nextPath) return;
      changePath(nextPath);
    },
    [path, changePath],
  );
 
  return navigate;
};

만약 현재 경로와 다음 경로가 같다면 아무것도 하지 않도록 간단하게 최적화했습니다. 이제 컴포넌트에서는 다음과 같이 사용하면 됩니다.

export default function Index() {
  const navigate = useNavigate();
 
  return ( \n
    <button onClick={() => navigate("/about")}> \n
      Go to About \n
    </button>
  );
}

브라우저와 주소 상태 값 공유하기

지금까지 만든 로직은 잘 작동합니다. 그러나 path는 우리가 임의로 만든 상태 값일 뿐, 브라우저가 표시하는 주소와는 아무 관련이 없습니다. 사용자가 아무리 useNavigate 훅을 사용하여 주소를 변경해도 브라우저의 주소 표시줄은 여전히 "/"를 보여주는 것입니다. 이 문제를 해결해보겠습니다.

history 객체의 pushState 메서드를 통해 브라우저의 세션 기록 스택에 항목을 추가할 수 있습니다. 주소 상태 값 변경이 일어날 때마다 이 메서드를 호출해주면 됩니다.

또한, 브라우저에서 뒤로가기 / 앞으로가기 버튼을 누르면 "popstate" 이벤트가 발생합니다. 이 때 이벤트 객체의 state 속성에 어떤 값을 저장해 놓을 수 있습니다. 이는 위에서 사용한 pushState 메서드의 첫 번째 매개변수에 해당합니다. path 값을 저장해놓고 이를 통해 주소 상태 값을 변경하겠습니다.

components/Router.tsx

interface RouterProps {
  children: React.ReactNode | null;
}
 
export default function Router({ children }: RouterProps) {
  const [path, setPath] = useState(window.location.pathname);
 
  const changePath = useCallback((path: string) => {
    window.history.pushState({ path }, "", path);
    setPath(path);
  }, []);
 
  useEffect(() => {
    const handlePopState = (e: PopStateEvent) => {
      setPath(e.state.path);
    };
 
    window.addEventListener("popstate", handlePopState);
 
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);
 
  return (
    <RouterContext.Provider value={{ path, changePath }}>
      {children}
    </RouterContext.Provider>
  );
}

이제 브라우저의 주소 표시줄, 뒤로가기 / 앞으로가기 버튼이 우리가 만든 주소 상태 값과 잘 연동되었습니다.

2. Nested Routes 구현

Nested Routes는 <Route> 컴포넌트를 중첩해서 사용할 수 있는 기능입니다.

<Router>
  <Routes>
    <Route path="fruit" element={<Fruit />}>
      <Route index element={<FruitIndex />} />
      <Route path="apple/buy" element={<AppleBuy />} />
    </Route>
  </Routes>
</Router>

컴포넌트가 중첩됨에 따라 각 컴포넌트들의 path 속성 또한 자동으로 쌓여갑니다. 위의 예시에서 자식 라우트들의 주소는 "/fruit"와 "/fruit/apple/buy"가 됩니다. 이 때 자식 컴포넌트는 부모 컴포넌트의 <Outlet />의 위치에 렌더링 됩니다.

export default function Fruit() {
  return (
    <div>
      <h1>Fruit</h1>
      <Outlet />
    </div>
  );
}

이제 해당 기능을 구현해보겠습니다. 가장 큰 변화는 <Route> 컴포넌트들이 여러 단계로 중첩되어 있다는 것입니다. 그러면 더 이상 <Routes> 컴포넌트에서 단순히 자식들을 순회하며 child.props.path와 path 값을 비교하는 방식으로 렌더링할 컴포넌트를 찾을 수는 없습니다. 이 부분이 복잡해질 것 같으므로 새로운 함수로 분리하겠습니다.

components/Routes.tsx

export interface RoutesProps {
  children: React.ReactNode | null;
}
 
export default function Routes({ children }: RoutesProps) {
  const { path } = useRouterContext();
 
  const element = renderMatchRoute(children, path);
 
  return element;
}

이제 renderMatchRoute 함수는 자식들을 순회하면서 브라우저의 주소와 자식들의 path 속성 값들을 비교할 것입니다. 만약 어떤 자식의 path 속성 값이 브라우저의 주소와 부합하면(예를 들어 path 값이 "/fruit/apple/buy"이고 자식의 path 속성 값이 "fruit"인 경우) 해당 자식을 렌더링합니다. 그리고 해당 자식을 렌더링하는 새로운 문제는 처음 문제와 정확히 똑같고 크기만 작은 문제가 됩니다. 재귀호출의 원리입니다. 이 때 매개변수로 전달되는 path 값은 자식의 path 속성 값이 제외된 상태로 전달되어야 합니다. 이전에 구현하지 않았던 index 속성 또한 처리해주겠습니다.

utils/renderMatchRoute.ts

export function renderMatchRoute(
  children: React.ReactNode,
  path: string
): React.ReactNode {
  for (const child of Children.toArray(children)) {
    if (!isValidElement<RouteProps>(child)) {
      continue;
    }
 
    if (path === "" && child.props.index) {
      // `path`가 비어있고 자식이 index라면 해당 라우트를 렌더링한다. (재귀호출의 종료 조건)
      return child.props.element;
    }
 
    const pattern = `/${child.props.path}`;
    const newPath = path.slice(pattern.length);
 
    const isMatch =
      !path.startsWith(pattern) ||
      (path.length > pattern.length && path[pattern.length] !== "/");
 
    if (
      child.props.path !== undefined &&
      child.props.element !== undefined &&
      isMatch
    ) {
      return {child.props.element}; // 자식 컴포넌트를 <Outlet />에 어떻게 넣지?
    }
  }
 
  return null;
}

그런데 구현하다보니 문제가 생겼습니다. 우리는 부모 라우트의 <Outlet /> 자리에 자식 라우트를 렌더링 해야 합니다. 그러나 <Outlet />은 {child.props.element} 변수 안에 있는 컴포넌트라서 밖에서 접근할 수 없습니다. 그러면 <Outlet /> 컴포넌트가 알아서 자기가 렌더링할 컴포넌트를 알아내야 합니다. 데이터를 전달해야 하지만 정확한 컴포넌트 위치를 알 수 없는 경우는 이제 익숙합니다. outlet 전달을 위한 컨텍스트를 만들겠습니다.

context/OutletContext.ts

export const OutletContext = createContext<React.ReactNode>(null);
 
export const useOutletContext = () => {
  const context = useContext(OutletContext);
  if (context === undefined) {
    throw new Error("useOutletContext must be used within a OutletContext");
  }
  return context;
};

그리고 아래와 같이 컨텍스트의 value에는 재귀호출로 렌더링된 자식 라우트를 넣어주면 됩니다.

utils/renderMatchRoute.ts

export function renderMatchRoute(
  children: React.ReactNode,
  path: string,
): React.ReactNode {
  for (const child of Children.toArray(children)) {
    if (!isValidElement<RouteProps>(child)) {
      continue;
    }
 
    if (path === "" && child.props.index) {
      return child.props.element;
    }
 
    const pattern = `/${child.props.path}`;
    const newPath = path.slice(pattern.length);
 
    const outlet = renderMatchRoute(child.props.children, newPath);
 
    const isMatch =
      !path.startsWith(pattern) ||
      (path.length > pattern.length && path[pattern.length] !== "/");
 
    if (
      child.props.path !== undefined &&
      child.props.element !== undefined &&
      isMatch
    ) {
      return (
        <OutletContext.Provider value={outlet}>
          {child.props.element}
        </OutletContext.Provider>
      );
    }
  }
 
  return null;
}

<Outlet /> 컴포넌트는 이 컨텍스트를 사용하여 자식 라우트를 렌더링합니다.

components/Outlet.tsx

export default function Outlet() {
  const outlet = useOutletContext();
 
  return outlet;
}

Layout Routes 구현

Layout Routes는 <Route> 컴포넌트에 element 속성만 있는 경우입니다. 이 경우 위의 Nested Routes처럼 컴포넌트는 중첩되지만, 브라우저 주소에 새로운 세그먼트가 추가되지는 않습니다. 아래의 예시에서 "/login" 에 접근하면 <Layout1 />, <Layout2 />, <Layout3 /> 컴포넌트가 모두 중첩되어 렌더링되는 식입니다.

<Router>
  <Routes>
    <Route element={<Layout1 />}>
      <Route element={<Layout2 />}>
        <Route element={<Layout3 />}>
          <Route path="/login" element={<Login />} /> {/* /login */}
        </Route>
      </Route>
    </Route>
  </Routes>
</Router>

위에서 만든 renderMatchRoute 함수를 수정해보겠습니다.

utils/renderMatchRoute.ts

export function renderMatchRoute(
  children: React.ReactNode,
  path: string,
): React.ReactNode {
  for (const child of Children.toArray(children)) {
    if (!isValidElement<RouteProps>(child)) {
      continue;
    }
 
    if (path === "" && child.props.index) {
      return child.props.element;
    }
 
    const pattern = `/${child.props.path}`;
    const newPath = path.slice(pattern.length);
 
    const outlet = renderMatchRoute(
      child.props.children,
      child.props.path === undefined ? path : newPath,
    );
 
    const isMatch =
      !path.startsWith(pattern) ||
      (path.length > pattern.length && path[pattern.length] !== "/");
 
    if (
      (child.props.path !== undefined &&
        child.props.element !== undefined &&
        isMatch) ||
      (child.props.path === undefined && outlet !== null)
    ) {
      return (
        <OutletContext.Provider value={outlet}>
          {child.props.element}
        </OutletContext.Provider>
      );
    }
  }
 
  return null;
}

수정한 부분은 크게 두 곳 입니다. 우선 재귀호출 부분에서 매개변수로 전달되는 path 값은 유지하도록 수정했습니다. 위에서도 설명했듯이 Layout Routes는 주소에 어떤 세그먼트도 추가하지 않기 때문입니다. 이는 19번째 줄에 삼항 연산자를 통해 구현되어있습니다.

또한 재귀호출이 일어나는 조건도 추가했습니다. 어떤 Layout Route가 렌더링 되는 필요충분 조건은 그 자식들중 적어도 하나가 렌더링 되는 것, 즉 outlet !== null입니다. 이는 30번째 줄의 조건문에 구현되어있습니다.

Route Prefixes 구현

이번에는 <Route> 컴포넌트에 path 속성만 있는 경우입니다. 렌더링되는 컴포넌트에는 아무 영향도 끼치지 않지만, 브라우저 주소에 새로운 세그먼트가 추가됩니다. 아래의 예시에서 각 라우트를 "/math", "/math/add" 와 같이 접근할 수 있습니다.

<Router>
  <Routes>
    <Route path="math">
      <Route index element={<MathIndex />} /> ...{/* /math ....*/}
      <Route path="add" element={<MathAdd />} /> {/* /math/add */}
    </Route>
  </Routes>
</Router>

이 경우도 renderMatchRoute 함수를 조금 수정하면 쉽게 구현할 수 있습니다.

utils/renderMatchRoute.ts

export function renderMatchRoute(
  children: React.ReactNode,
  path: string,
): React.ReactNode {
  for (const child of Children.toArray(children)) {
    if (!isValidElement<RouteProps>(child)) {
      continue;
    }
 
    if (path === "" && child.props.index) {
      return child.props.element;
    }
 
    const pattern = `/${child.props.path}`;
    const newPath = path.slice(pattern.length);
 
    const outlet = renderMatchRoute(
      child.props.children,
      child.props.path === undefined ? path : newPath,
    );
 
    const isMatch =
      !path.startsWith(pattern) ||
      (path.length > pattern.length && path[pattern.length] !== "/");
 
    if (
      (child.props.path !== undefined &&
        child.props.element !== undefined &&
        isMatch) ||
      (child.props.path === undefined && outlet !== null)
    ) {
      return (
        <OutletContext.Provider value={outlet}>
          {child.props.element}
        </OutletContext.Provider>
      );
    }
 
    if (child.props.element === undefined && isMatch) {
      return renderMatchRoute(child.props.children, newPath);
    }
  }
 
  return null;
}

<Route> 컴포넌트에 path 속성만 있는 경우에는 재귀호출의 문제에서 children과 path 모두 한 단계씩 내려가기만 하면 됩니다. 따라서 위와 같이 함수를 호출하는 것으로 간단하게 처리가 가능합니다.

3. Dynamic Routes 구현

마지막으로 동적으로 주소를 파싱할 수 있는 Dynamic Routes 기능을 구현해보겠습니다. 사용하고자 하는 코드는 아래와 같습니다.

<Router>
  <Routes>
    <Route path="teams/:teamId" element={<Team />} />
  </Routes>
</Router>

동적으로 입력을 받고 싶은 세그먼트가 있다면, 위와 같이 ":" 문자로 시작하게 작성하면 됩니다. 만약 브라우저의 주소가 path 양식과 부합한다면, 아래와 같이 useParams 훅을 사용하여 파싱된 값을 사용할 수 있습니다.

export default function Team() {
  let { teamId } = useParams();
 
  return <h1>Team: {teamId}</h1>;
}

이 기능을 구현하려면 기존 코드의 어느 부분을 수정해야 할까요? 바로 renderMatchRoute 함수의 22~24 번째 줄에 해당하는 const isMatch = ... 부분입니다. 이제는 동적인 세그먼트가 추가되었으므로 더 이상 단순한 문자열 비교로는 주소의 부합 여부를 알아낼 수 없습니다. 새로운 패턴 매칭 함수를 만들어야 합니다.

위와 동시에 useParams 훅을 만들어야 하는 것도 잊지 말아야 합니다. 패턴을 매칭하는 과정에서 ":"로 시작하는 세그먼트가 나온다면 대응되는 값을 전달해주면 됩니다. 이 또한 Context API를 사용해서 컴포넌트에 값을 전달해주면 편할 것 같습니다. 운이 좋게도 <OutletContext.Provider>의 위치에 <ParamsContext.Provider>를 같이 넣어주면 올바른 컴포넌트에 값이 전달됩니다. 우선 컨텍스트부터 만들어 놓겠습니다.

context/ParamsContext.ts

export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};
 
export const ParamsContext = createContext<Params<string>>({});
 
export const useParams = () => {
  const context = useContext(ParamsContext);
  if (context === undefined) {
    throw new Error("useParams must be used within a ParamsContext");
  }
  return context;
};

패턴 매칭 함수의 구현은 다음과 같습니다.

utils/matchPath.ts

function extractFirstSegment(path: string): string | null {
  const match = path.match(/^\/([^/]+)/);
  return match ? match[1] : null;
}

우선 주소 값을 받아 첫 번째로 나오는 "/???" 꼴의 세그먼트에서 "???" 부분을 추출하는 유틸 함수를 만들었습니다. 이제 비교해야 하는 두 주소 값이 있을 때, 우선 첫 번째 세그먼트들만 고려해도 됩니다. 첫 번째 세그먼트를 제외한 나머지 부분을 비교하는 것은 원래의 문제와 똑같으면서 크기만 줄어들었기 때문입니다. 또 다시 재귀호출의 원리를 활용할 수 있게 되었습니다.

utils/matchPath.ts

export function matchPath(
  path: string, @ // 브라우저 주소 (ex. "/teams/123")
  pattern: string // 매칭할 패턴@ (ex. "/teams/:teamId")
): {
  isMatch: boolean;
  params: Record<string, string>;
} {
  const firstSegmentOfPath = extractFirstSegment(path);
  const firstSegmentOfPattern = extractFirstSegment(pattern);
 
  if (firstSegmentOfPattern === null) {
    // 패턴이 비어있으면 항상 매칭 성공이다.
    // 예를 들어 "/teams/123"과 "/teams"의 경우 재귀호출의 다음 단계에서
    // "/123"과 ""의 매칭 결과가 반환되어 최종적으로 true가 반환된다.
    return {
      isMatch: true,
      params: {},
    };
  }
 
 
  const isDynamic = firstSegmentOfPattern.startsWith(":");
 
  if (!isDynamic && firstSegmentOfPath !== firstSegmentOfPattern) {
    // 동적 세그먼트가 없고 첫 번째 세그먼트가 다르면 매칭 실패이다.
    return {
      isMatch: false,
      params: {},
    };
  }
 
  const patternRest = pattern.slice(firstSegmentOfPattern.length + 1);
 
  if (firstSegmentOfPath === null) {
    // 패턴은 비어있지 않은데 주소가 비어있으면 매칭 실패다.
    return {
      isMatch: false,
      params: {},
    };
  }
 
  const pathRest = path.slice(firstSegmentOfPath.length + 1);
 
  const params: Record<string, string> = {};
 
  if (isDynamic) {
    // 동적 세그먼트가 있으면 파싱한다.
    const paramName = firstSegmentOfPattern.slice(1);
    params[paramName] = firstSegmentOfPath;
  }
 
  const { isMatch: isMatchRest, params: paramsRest } = matchPath(
    pathRest,
    patternRest
  );
 
  // 재귀호출의 결과와 함께 반환한다.
  return {
    isMatch: isMatchRest,
    params: {
      ...params,
      ...paramsRest,
    },
  };
}

위와 같이 작성해주면 matchPath 함수는 주소 값과 패턴의 매칭 여부와 함께 파싱된 동적 세그먼트들을 반환합니다. 이제 위 함수를 renderMatchRoute 함수에서 호출하겠습니다.

utils/renderMatchRoute.ts

export function renderMatchRoute(
  children: React.ReactNode,
  path: string,
): React.ReactNode {
  for (const child of Children.toArray(children)) {
    if (!isValidElement<RouteProps>(child)) {
      continue;
    }
 
    if (path === "" && child.props.index) {
      return child.props.element;
    }
 
    const pattern = `/${child.props.path}`;
    const newPath = path.slice(pattern.length);
 
    const outlet = renderMatchRoute(
      child.props.children,
      child.props.path === undefined ? path : newPath,
    );
 
    const { isMatch, params } = matchPath(path, pattern);
 
    if (
      (child.props.path !== undefined &&
        child.props.element !== undefined &&
        isMatch) ||
      (child.props.path === undefined && outlet !== null)
    ) {
      return (
        <OutletContext.Provider value={outlet}>
          <ParamsContext.Provider value={params}>
            {child.props.element}
          </ParamsContext.Provider>
        </OutletContext.Provider>
      );
    }
 
    if (child.props.element === undefined && isMatch) {
      return renderMatchRoute(child.props.children, newPath);
    }
  }
 
  return null;
}

{child.props.element} 변수를 <ParamsContext.Provider> 컴포넌트로 감싸주는 작업도 완료했습니다. 이제 라우트 컴포넌트에서 useParams 훅을 사용하면 파싱된 값을 받을 수 있습니다.

Optional Segments 구현

선택적으로 존재할 수 있는 세그먼트인 Optional Segments를 이어서 구현해보겠습니다.

<Router>
  <Routes>
    <Route path="users/:userId/edit?" element={<User />} />
    <Route path=":lang?/main" element={<Main />} />
  </Routes>
</Router>

위에는 두 개의 예시 라우트가 있습니다. 첫 번째 예시에서는 "edit" 문자열 뒤에 "?" 기호가 붙어있습니다. 이 경우 해당 세그먼트가 존재하지 않아도 매칭이 성공합니다. 예를 들어 "/users/123", "/users/456/edit" 모두 접근할 수 있습니다.

두 번째 예시에서는 "lang" 문자열 앞에는 ":" 기호가, 뒤에는 "?" 기호가 붙어있습니다. 이 경우 동적이면서 동시에 선택적으로 존재할 수 있는 세그먼트가 됩니다. 예를 들어 "/main", "/en/main", "/ko/main" 모두 접근할 수 있습니다.

utils/matchPath.ts

export function matchPath(
  path: string,
  pattern: string,
): {
  isMatch: boolean;
  params: Record<string, string>;
} {
  const firstSegmentOfPath = extractFirstSegment(path);
  const firstSegmentOfPattern = extractFirstSegment(pattern);
 
  if (firstSegmentOfPattern === null) {
    return {
      isMatch: true,
      params: {},
    };
  }
 
  const isDynamic = firstSegmentOfPattern.startsWith(":");
  const isOptional = firstSegmentOfPattern.endsWith("?");
 
  if (
    !isDynamic &&
    !isOptional &&
    firstSegmentOfPath !== firstSegmentOfPattern
  ) {
    return {
      isMatch: false,
      params: {},
    };
  }
 
  const patternRest = pattern.slice(firstSegmentOfPattern.length + 1);
 
  if (isOptional) {
    const pattern1 = `/${firstSegmentOfPattern.slice(0, -1)}${patternRest}`;
    const pattern2 = `${patternRest}`;
 
    const { isMatch: isMatch1, params: params1 } = matchPath(path, pattern1);
 
    if (isMatch1) {
      return {
        isMatch: true,
        params: { ...params1 },
      };
    }
 
    const { isMatch: isMatch2, params: params2 } = matchPath(path, pattern2);
 
    if (isMatch2) {
      return {
        isMatch: true,
        params: { ...params2 },
      };
    }
 
    return {
      isMatch: false,
      params: {},
    };
  }
 
  if (firstSegmentOfPath === null) {
    return {
      isMatch: false,
      params: {},
    };
  }
 
  const pathRest = path.slice(firstSegmentOfPath.length + 1);
 
  const params: Record<string, string> = {};
 
  if (isDynamic) {
    const paramName = firstSegmentOfPattern.slice(1);
    params[paramName] = firstSegmentOfPath;
  }
 
  const { isMatch: isMatchRest, params: paramsRest } = matchPath(
    pathRest,
    patternRest,
  );
 
  return {
    isMatch: isMatchRest,
    params: {
      ...params,
      ...paramsRest,
    },
  };
}

Optional Segments를 구현해보았습니다. 우선 19, 23번째 줄에서 선택적 세그먼트가 있는 경우의 예외 처리를 추가해주었습니다. 중요한 부분은 그 아래 부분입니다.

선택적 세그먼트 기능을 사용하게 되면 특정 세그먼트가 존재할수도 있고, 존재하지 않을수도 있습니다. 그런데 두 경우 모두 이미 함수에서 처리할 수 있는 경우들입니다. 재귀호출의 원리를 이용해서 어려운 한 문제를 간단한 두 문제로 쪼갠 것입니다. 실제 구현에서도 가능한 두 가지의 경우를 모두 시도해보고, 실패하면 false를 반환하도록 구현하였습니다.

useOptionals 훅 구현

실제 React Router v7에서의 Optional Segments 기능은 위가 끝입니다. 그런데 여기까지만 구현하면 좀 심심하니까 선택적 세그먼트가 실제로 사용되었는지 여부를 제공하는 훅도 만들어보았습니다. 이름은 useOptionals가 적당할 것 같습니다.

context/OptionalsContext.ts

export function matchPath(
  path: string,
  pattern: string,
): {
  isMatch: boolean;
  params: Record<string, string>;
  optionals: Record<string, boolean>;
} {
  // ...
 
  if (isOptional) {
    const pattern1 = `/${firstSegmentOfPattern.slice(0, -1)}${patternRest}`;
    const pattern2 = `${patternRest}`;
 
    const {
      isMatch: isMatch1,
      params: params1,
      optionals: optionals1,
    } = matchPath(path, pattern1);
 
    if (isMatch1) {
      return {
        isMatch: true,
        params: { ...params1 },
        optionals: {
          ...optionals1,
          [firstSegmentOfPattern.slice(0, -1)]: true,
        },
      };
    }
 
    const {
      isMatch: isMatch2,
      params: params2,
      optionals: optionals2,
    } = matchPath(path, pattern2);
 
    if (isMatch2) {
      return {
        isMatch: true,
        params: { ...params2 },
        optionals: {
          ...optionals2,
          [firstSegmentOfPattern.slice(0, -1)]: false,
        },
      };
    }
 
    return {
      isMatch: false,
      params: {},
      optionals: {},
    };
  }
 
  // ...
}

context/OptionalsContext.ts 파일에서 OptionalsContext를 만들고, renderMatchRoute 함수에 <OptionalsContext.Provider> 컴포넌트를 추가해주었습니다. (이 부분 코드는 간단하니 생략하겠습니다.) 그리고 위와 같이 matchPath 함수를 수정해주었습니다. 그저 재귀호출 분기에 따라 세그먼트의 존재 유무를 전달해주기만 하면 됩니다.

Splats 구현

마지막 기능은 Splats 입니다.

<Router>
  <Routes>
    <Route path="files/*" element={<File />} />
  </Routes>
</Router>

위처럼 세그먼트 끝에 "*" 기호를 붙여 임의의 개수의 세그먼트를 포함할 수 있는 기능입니다. 예를 들어 "/files/a/b/c" 주소는 "/files/*" 패턴에 매칭됩니다. 그리고 매칭된 문자열은 역시 useParams 훅을 사용하여 얻을 수 있습니다.

export default function File() {
  let { "*": splats } = useParams();
 
  return <h1>splat: {splats}</h1>;
}

이 기능을 구현해보겠습니다. 뭔가 문자열 전체를 매칭시킨다는 느낌 때문에 더 복잡할 것 같은데, 사실 엄청 간단합니다.

utils/matchPath.ts

export function matchPath(
  path: string,
  pattern: string,
): {
  isMatch: boolean;
  params: Record<string, string>;
  optionals: Record<string, boolean>;
} {
  const firstSegmentOfPath = extractFirstSegment(path);
  const firstSegmentOfPattern = extractFirstSegment(pattern);
 
  if (firstSegmentOfPattern === null) {
    return {
      isMatch: true,
      params: {},
      optionals: {},
    };
  }
 
  const isSplat = firstSegmentOfPattern === "*";
 
  if (isSplat) {
    return {
      isMatch: true,
      params: { "*": path.slice(1) },
      optionals: {},
    };
  }
 
  const isDynamic = firstSegmentOfPattern.startsWith(":");
  const isOptional = firstSegmentOfPattern.endsWith("?");
 
  // ...
}

그냥 위처럼 "*" 기호가 나올 경우 매칭 성공 처리하고 "*" 기호 이후로 나오는 문자열을 params 객체에 넣어서 넘겨주면 끝입니다. 이렇게 React Router v7 (Library)의 모든 기능을 구현을 마칩니다.

후기

재귀호출이 매우 강력한 도구라는 것을 다시 한번 느꼈습니다. 복잡한 문제를 잘게 쪼갬으로써 더욱 쉽게 해결하게 해주기 때문입니다. 예를 들어 matchPath 함수에서는 path와 pattern의 처음 $n$ 개의 segment가 같은지 판별하는 복잡한 문제를, 단순히 첫 번째 segment 단 하나만 비교하는 간단한 문제로 치환할 수 있습니다.

또한 Optional Segments가 있는 패턴 매칭을 for문 등으로 구현했다면 매우 복잡했겠지만, 재귀호출을 활용하면 (Optional Segments가 없는) 두 개의 간단한 문제로 쪼개어 쉽게 해결하기도 하였습니다. 재귀호출의 아름다움을 다시 한번 느낀 순간이었습니다.

오랜만에 재미있는 프로젝트를 한 것 같습니다. 또 자연스럽게 React Router에 대해 깊게 이해할 수 있게 되었습니다.
앞으로도 이렇게 존재하는 도구들을 다시 만들어보면서 원리를 이해하는 시간을 자주 가져야겠습니다.