react-router-dom으로 살펴보는 캡슐화, 추상화의 중요성 (우리 손'끝'만 닿자..)

React Router DOM v6: 캡슐화와 추상화를 통한 라우팅 관리

과거 React Router Dom의 버전 업그레이드로 인해 고민하였던 점을 공유 합니다.

라이브러리는 개발 시 엄청난 이점을 제공합니다. 속도, 안정성 등 여러 면에서 우리에게 이점을 주지만, 라이브러리와 손 깍지를 끼게 된다면, 매우 어색한 상황이 발생 할 수 있습니다.
그렇기에 의존성을 최소화 하고, 분리 할 필요가 있습니다. "우리 손 '끝'만 닿자..

React-Router-DOM은 React 애플리케이션에서 라우팅을 관리하는 데 사용되는 라이브러리입니다. 버전 6으로 업데이트 되면서 많은 문법이 변경되었고, 이에 따라 주요 기능 중 하나인 라우터 훅의 변경이 있었습니다.

v5에서는 다음과 같이 useHistory를 사용하여 브라우저 히스토리를 관리했습니다.

V5, V6 차이

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

function App() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

그러나 v6에서는 useHistory 대신 useNavigate를 사용하게 되었습니다.

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

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

추상화

이러한 변경은 하나의 컴포넌트에서만 이루어진 것이 아닙니다. 또 대규모 애플리케이션에서 이를 모두 수정해야 한다면 매우 번거롭고, 휴먼에러를 유발 할 수도 있습니다. 이런 경우, 캡슐화와 추상화를 통해 라우팅 관리를 한 곳에서 하도록 하는 것이 효율적입니다.

아래와 같이 라우터 훅을 추상화하고 관리하는 것이 가능합니다.

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

const useCustomRouter = () => {
    const navigate = useNavigate();
  
    return {
      push(path) {
        navigate(path);
      },
      goBack(cnt) {
        navigate(cnt || -1);
      },
    }
}

이렇게하면 애플리케이션 전체에서 커스텀 라우터 훅을 사용하여 라우팅을 관리할 수 있습니다.

import { useCustomRouter } from "/util/useCustomRouter";

function App() {
  let router = useCustomRouter();
  function handleClick() {
    router.push("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

여기서 React useMemo를 사용 해 성능까지 고려할 수 있습니다.

import { useMemo } from 'react';
import { useHistory } from 'react-router-dom';

const useCustomRouter = () => {
    const history = useHistory();

    const customRouter = useMemo(() => ({
        push: (path) => history.push(path),
        goBack: (cnt) => history.goBack(cnt || -1),
        replace: () => {...},
        // router dom 기능 추가 가능.
    }), [history]);

    return customRouter;
};

이렇게 모듈화와 캡슐화를 통해 변경사항에 대응할 수 있습니다. 또한, 더 나아가 특정 경로 이동 시 서버에 특정 요청이나 이벤트를 기록하고 싶다면, 커스텀 라우터 훅을 수정하여 해당 기능을 추가할 수 있습니다.

    const customRouter = useMemo(() => ({
        push: (path) => {
            // .. push메서드 작동 시 특정 동작 실행 코드
	        history.push(path)
        },

이러한 접근 방식은 코드의 유지보수성과 재사용성을 향상시키며, 애플리케이션의 확장성을 높입니다. 캡슐화와 추상화를 통해 코드를 더욱 깔끔하게 관리할 수 있습니다.

마치며

커스텀 라우터 훅을 활용하여 간단한 기능을 개발하며, 왜 추상화가 필요한지와 의존성 관리 방법에 대해 깊게 생각해 보았습니다. 이러한 방식은 React-Router-Dom에 국한되는 것이 아니라 모든 코드에 적용할 수 있는 범용적인 원칙이라고 생각합니다. 코드를 더욱 깔끔하게 관리하고, 라이브러리의 문법 변경에 대한 코드 변경을 최소화하기 코드를 짜며 많은 고민이 필요할 것 같습니다!