usePageNavigation

Introduction

이 훅은 React 애플리케이션에서 페이지 내비게이션을 편리하게 처리하기 위한 커스텀 훅인 usePageNavigation을 구현한 것입니다. React Router 라이브러리의 useNavigate 훅을 이용하여 페이지 이동을 관리하고, 몇 가지 편의 기능을 제공합니다.

1. 간편한 페이지 이동: 커스텀 훅을 사용하면 페이지 이동이나 브라우저 열기 등의 작업을 간편하게 처리할 수 있습니다. 반복적으로 사용되는 내비게이션 로직을 훅으로 추상화하여 중복을 줄일 수 있습니다.

2. 유지보수 용이성: 페이지 내비게이션 로직이 훅에 캡슐화되어 있으므로, 향후 내비게이션 관련 로직을 수정할 때 한 곳에서만 수정하면 됩니다. 이는 코드 유지보수를 향상시키고 버그를 줄일 수 있습니다.

3. 확장성과 재사용성: 커스텀 훅은 각 컴포넌트에서 쉽게 재사용할 수 있습니다. 필요한 프로젝트에서 커스텀 훅을 추가로 확장하여 특정 요구사항에 맞게 사용할 수 있습니다.

Example

// 예시 컴포넌트에서의 사용
import React from "react";

const ExampleComponent = () => {
  const navigation = usePageNavigation();

  return (
    <div>
      <button onClick={navigation.onGoBackward}>뒤로 가기</button>
      <button onClick={navigation.onGoForward}>앞으로 가기</button>
      <button onClick={() => navigation.move("/some-page")}>특정 페이지로 이동</button>
      <button onClick={() => navigation.moveOtherBrowser("https://example.com", "_blank", "width=800,height=600")}>다른 브라우저에서 열기</button>
      <button onClick={navigation.onGoHome}>홈으로 이동</button>
    </div>
  );
};

Hook

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

/** URL 타입 */
type UrlType = string;
type NameType = "_blank" | "_parent" | "_self" | "_top";

/**
 * 페이지 내비게이션을 관리하는 커스텀 훅입니다.
 * React Router의 useNavigate 훅을 이용하여 페이지 이동을 처리합니다.
 * @returns {Object} - 페이지 내비게이션 관련 함수들을 포함한 객체
 */

export default function usePageNavigation() {
  // React Router의 useNavigate 훅을 사용하여 네비게이션 객체를 얻어옵니다.
  const navigate = useNavigate();

  /** 페이지 뒤로가기 기능 */
  const onGoBackword = () => navigate(-1);

  /** 페이지 앞으로 가기 기능 */
  const onGoForward = () => navigate(1);

  /**
   * 페이지 이동 기능
   * @param { UrlType } path - 이동할 페이지의 url
   * @returns {vodi} - 페이지 이동
   */
  const move = (path: UrlType) => navigate(path);

  /**
   * 다른 브라우저 창에서 페이지 이동 기능
   * @param {UrlType} url - 이동할 페이지의 URL
   * @param {string} name - 새 창의 이름 (기본값: "_blank")
   * @description
      - _blank : 새 창에 열립니다. 이것이 기본값입니다.
      - parent : 부모 프레임에 열립니다.
      - _self : 현재 페이지를 대체합니다.
      - _top : 로드된 프레임셋을 대체합니다
   * @param {string} options - 새 창의 옵션
   * @returns {void} - 브라우저 이동
   * 
   */
  const moveOtherBrower = (url: UrlType, name: NameType = "_blank", option: string): void => {
    window.open(url, name, option);
  };

  /** 페이지 이동 - 메인 */
  const onGoHome = () => navigate("/");

  return {
    onGoBackword,
    onGoForward,
    onGoHome,
    move,
    moveOtherBrower,
  };
}