React와 History API를 사용하여 react-router-dom 구현하기

Background

과제 구현 내용

1. 해당 주소로 진입했을 때 아래 주소에 맞는 페이지가 렌더링될 것.

2. 버튼을 클릭하면 해당 페이지로, 뒤로 가기 버튼을 누르면 이전 페이지로 이동할 것.

3. Router , Route 컴포넌트를 구현하며, 다음과 같은 형태를 띌 것.

ReactDOM.createRoot(container).render(
  <Router>
    <Route path="/" component={<Root />} />
    <Route path="/about" component={<About />} />
  </Router>
);

1. 최소 push 기능을 가진 useRouter Hook을 작성할 것.

const { push } = useRouter();

1. Route 컴포넌트는 props로 path, component로 제공받고, path와 window.location.pathname 이 같으면 제공받은 컴포넌트를 return, 그렇지 않다는 null을 return 하면 되겠다.

2. Router 컴포넌트는 단순히 껍데기 역할을 하지 않을까?

구현해보기

// src/utils/use-router.tsx

export default function useRouter() {
  // 뒤로가기 메서드
  const back = () => {
    history.back();
  };

  // 특정 페이지 이동 메서드
  const push = (url: string | URL | null | undefined) => {
    // url을 변경해준다.
    window.history.pushState({}, "", url);
    // url이 변경되었지만, 화면이 변하지 않아서 넣어주었는데
    // TODO: location.href는 새로고침을 발생시키기 때문에 SPA 취지에 맞지 않다...
    window.location.href = window.location.pathname;
  };

  return { back, push };
}

// src/pages/Root.tsx

import React from "react";
import useRouter from "../utils/use-router";

export default function Root() {
  const { push } = useRouter();

  const handleClickGoToAboutButton = () => {
    push("/about");
  };
  return (
    <>
      <h1>This is Root Page.</h1>
      <button onClick={handleClickGoToAboutButton}>About</button>
    </>
  );
}

// src/pages/About.tsx

import React from "react";
import useRouter from "../utils/use-router";

export default function About() {
  const { push } = useRouter();

  const handleClickGoToMainButton = () => {
    push("/");
  };
  return (
    <>
      <h1>This is About Page.</h1>
      <button onClick={handleClickGoToMainButton}>Go Main</button>
    </>
  );
}

// src/components/Route.tsx

import { ReactNode, JSX, useEffect, useState } from "react";

interface RouteProps {
  path: string;
  component: JSX.Element;
}

export default function Route({ path, component }: RouteProps) {
  const [pathName, setPathName] = useState(window.location.pathname);

  useEffect(() => {
    const handlePopState = () => setPathName(window.location.pathname);

    window.addEventListener("popstate", handlePopState);

    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);
  return pathName === path ? component : null;
}

// src/components/Router.tsx

import React, { ReactNode, Children, ReactElement } from "react";

interface RouterProps {
  children: ReactNode;
}

export default function Router({ children }: RouterProps) {
  return children;
}

문제점

1. useRouter 훅의 push 메서드에서 해당 함수가 호출될 때마다 url은 변경되지만, 화면이 변하지 않아서 명시적으로 다음과 같은 코드를 작성하였다.

window.location.href = window.location.pathname;

1. 렌더링에 대한 로직이 Route 컴포넌트에서 이루어지는 것이 맞는 것인가? Route 컴포넌트는 말그대로 현재 url에 따라서 컴포넌트 혹은 null을 return하는 역할을 하고, 렌더링 로직은 부모 컴포넌트는 Router 에서 작성되는 것이 맞는 것 같다.

2. Route 컴포넌트가 url에 따라서 component 혹은 null을 return하여 눈으로 보기에 잘 렌더링되는 것 같지만, 컴포넌트를 return하던, null을 return 하던간에 아무튼 Route 컴포넌트는 렌더링이 되었다. 눈으로 보기에만 다르지 페이지에 대한 모든 Route 컴포넌트가 렌더링되고 있는 것이다.

리팩토링 방안

1. url 상태는 Router 컴포넌트에서 context api를 활용하여 전역으로 관리하자. 페이지에 컴포넌트가 많고, 깊숙한 컴포넌트에서 상태를 변화시키게 된다면 props drilling이 발생할 수 있고, 이를 context api로 보완할 수 있다.

2. Route 컴포넌트는 말그대로 페이지 컴포넌트를 보여주는 역할이다. 렌더링 로직은 부모 컴포넌트인 Router 에 작성하자.

3. Route 컴포넌트가 url에 따라서 props로 제공받은 컴포넌트 혹은 null을 return 한다고 해도, 결국은 렌더링 된다. 서비스의 규모가 커짐에 따라서 Route 컴포넌트가 엄청 많아진다면…? 전달받은 props가 리액트 컴포넌트인지를 판단하여 선택적으로 렌더링시키자.

4. Routes 컴포넌트를 만들어서 관심사를 분리하자.
• Router - 이벤트 감지, path 상태관리
• Routes - 하위 Route 컴포넌트 중 렌더링 해야하는 컴포넌트만 렌더링
• Route - 말그대로 렌더링되는 컴포넌트, 아무 역할이 없는 껍데기

리팩토링!!

1. Route 컴포넌트에는 아무런 로직이 없다. props로 전달받은 path 조차 사용되지 않음.

// src/components/Route.tsx

import { ReactNode } from "react";

interface RouteProps {
  path: string;
  component: ReactNode;
}

export default function Route({ path, component }: RouteProps) {
  return <>{component}</>;
}

1. Router 컴포넌트는 path를 관리하는 context가 있고, provider의 역할을 한다.

import React, { ReactNode, useEffect, useState, createContext } from "react";

interface RouterProps {
  children: ReactNode;
}

interface RouterContextValue {
  currentPath: string;
  changePath: (to: string) => void;
}

// path 관리 context
export const RouterContext = createContext<RouterContextValue | null>(null);

export default function Router({ children }: RouterProps) {
  // path 상태
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  useEffect(() => {
    const handleChangeCurrentPath = (event: PopStateEvent) => {
      setCurrentPath(event.state?.path ?? "/");
    };

    window.addEventListener("popstate", handleChangeCurrentPath);

    return () => {
      window.removeEventListener("popstate", handleChangeCurrentPath);
    };
  }, []);

  // path 변경
  const changePath = (to: string) => {
    window.history.pushState({ path: to }, "", to);
    setCurrentPath(to);
  };

  const routerContextValue: RouterContextValue = {
    currentPath,
    changePath,
  };

  return (
    <RouterContext.Provider value={routerContextValue}>
      {children}
    </RouterContext.Provider>
  );
}

1. useRouter Hook은 context의 changePath 를 활용한 push 메서드가 존재한다.

import { useContext } from "react";
import { RouterContext } from "../components/Router";

interface UseRouterType {
  push: (path: string) => void;
  pathname: string;
}

export default function useRouter(): UseRouterType {
  // context
  const RouterContextValue = useContext(RouterContext);

  if (RouterContextValue === null) {
    throw new Error("context 값이 null입니다.");
  }

  const { currentPath, changePath } = RouterContextValue;
  const pathname = currentPath;

  // 특정 페이지 이동 메서드
  const push = (path: string) => {
    changePath(path);
  };

  return { push, pathname };
}

1. Routes 컴포넌트는 path에 따라서 알맞는 Route 컴포넌트를 렌더링시킨다.

import React, { ReactNode, isValidElement } from "react";
import useRouter from "../utils/use-router";

interface RoutesProps {
  children: ReactNode[];
}

export default function Routes({ children }: RoutesProps) {
  const { pathname } = useRouter();
  const isRenderComponent = (child: ReactNode): boolean => {
    // React 컴포넌트가 아니라면 false return
    if (!isValidElement(child)) {
      return false;
    }

    return child.props.path === pathname;
  };
  return <>{children.find(isRenderComponent)}</>;
}

References

isValidElement – React

The library for web and native user interfaces

https://react.dev/reference/react/isValidElement

React Router를 직접 만들어보는 과정 (with 프리온보딩 FE 챌린지 10월)

8월에 참여했던 FE 프리온보딩 챌린지.. https://ghoon99.tistory.com/88 원티드 프리온보딩 챌린지 8월 참여 후기 원티드에서 운영하는 프로그램인 프리온보딩 챌린지, 8월 첫주 부터 2주동안 강의가 진행되었다. 마침 무언가 해볼 것들을 찾고있었는데 커리큘럼도 너무 좋아보였고, 이 기회에 리액트 쿼리 ghoon99.tistory.com 너무 만족했었고 10월에도 진행한다고 해서 바로 신청을 했다. 이번 주제는 CSR/SSR with Next JS 이다. 첫 시간에서는 MPA , SSR , SPA , CSR 에 대한 내용을 다뤘다. 리액트만으로 라우팅을 구현해보는 것이 과제로 나왔다. 혹시 완성된 코드가 궁금하면 여기서 확인하면 된다. https://github.com/GHooN99/..

https://ghoon99.tistory.com/91