usePageTitle

Introduction

이 훅은 React 애플리케이션에서 페이지의 document.title을 편리하게 처리하기 위해 만들었습니다. 이 훅을 사용하면 다음의 이점이 있습니다.

  1. 코드 중복 최소화: 페이지 제목을 변경하는 로직이 여러 컴포넌트에 필요할 때, 해당 로직을 여러 번 반복하지 않고 커스텀 훅에 담아 재사용할 수 있습니다.

  2. 일관성 유지: 페이지 제목 변경 로직이 커스텀 훅 내에 있기 때문에, 모든 컴포넌트에서 동일한 방식으로 페이지 제목을 변경할 수 있어 일관성을 유지할 수 있습니다.

  3. 유지보수 용이성: 페이지 제목 변경 로직이 하나의 훅에 집중되어 있기 때문에, 이 훅 내의 로직을 수정하거나 개선할 때 모든 사용 지점에 동일한 변경이 적용됩니다.

  4. 안정성 강화: console.assert를 사용하여 예상치 못한 입력이나 오류에 대한 경고를 추가함으로써 안정성을 높일 수 있습니다.

Example

import React from "react";

function MyApp() {
  // usePageTitle 훅을 사용하여 페이지 제목을 변경할 수 있는 함수를 받아옴
  const { handleChangePageTitle } = usePageTitle();

  // 페이지가 로드될 때 "My App"이라는 기본 제목으로 설정
  React.useEffect(() => {
    handleChangePageTitle("My App");
  }, [handleChangePageTitle]);

  // 버튼 클릭 시 페이지 제목을 변경
  const handleTitleChange = () => {
    handleChangePageTitle("New Page Title");
  };

  return (
    <div>
      <h1>{document.title}</h1>
      <button onClick={handleTitleChange}>Change Page Title</button>
    </div>
  );
}

export default MyApp;

이 Example 코드에서는 usePageTitle 훅을 사용하여 페이지 제목을 동적으로 변경하는 간단한 React 컴포넌트를 보여줍니다. 페이지가 처음 로드될 때 기본 제목인 "My App"으로 시작하고, 버튼을 클릭하면 페이지 제목이 "New Page Title"로 변경됩니다. 이때 usePageTitle 훅이 내부적으로 document.title을 조작하여 페이지 제목을 변경합니다.

Hook

import React from "react";

/**
 * 페이지 제목을 관리하기 위한 커스텀 React 훅입니다.
 *
 * @param {string} titleToTransform - 페이지 제목으로 설정할 문자열입니다.
 * @param {string} defaultTitle - 제목이 제공되지 않았을 때 사용할 기본 제목입니다.
 * @returns {Object} handleChangePageTitle 함수를 포함하는 객체입니다.
 */
export default function usePageTitle(titleToTransform: string = "", defaultTitle: string = "My App") {
  /**
   * 페이지 제목을 변경하고 콘솔 어서션을 처리하는 함수입니다.
   *
   * @param {string} title - 페이지 제목으로 설정할 문자열입니다.
   */
  const handleChangePageTitle = (title: string) => {
    console.assert(!!title, `결과 실패 : title에는 ${title}이 입력되어 기본 title로 ${defaultTitle}이 설정되었습니다.`);

    if (!title) return (document.title = "defaultTitle");
    return (document.title = title);
  };

  // useEffect를 사용하여 초기 제목을 설정하고 언마운트 시 정리합니다.
  React.useEffect(() => {
    console.assert(!!titleToTransform, "결과 실패 : 변경할 title의 값이 입력되지 않았습니다.");

    if (!titleToTransform) return;

    document.title = titleToTransform;

    // 언마운트 시 제목을 초기화하는 정리 함수입니다.
    return () => {
      console.assert(!!defaultTitle, "정리를 위한 defaultTitle이 제공되지 않았습니다.");
      document.title = defaultTitle;
    };
  }, []); // 빈 의존성 배열은 useEffect가 마운트 시에만 실행되도록 보장합니다.

  // handleChangePageTitle 함수를 반환합니다.
  return { handleChangePageTitle };
}

이 훅은 페이지 제목을 관리하기 위한 커스텀 React 훅인 usePageTitle을 정의합니다. titleToTransform (설정할 제목)과 defaultTitle (제공되지 않았을 때 사용할 기본 제목) 두 가지 선택적 매개변수를 받습니다. 훅은 handleChangePageTitle 함수를 포함하는 객체를 반환하며, 이 함수를 사용하여 페이지 제목을 동적으로 변경할 수 있습니다.

useEffect는 마운트 시 초기 제목을 설정하고 언마운트 시 제목을 초기화하기 위해 사용됩니다. 콘솔 어서션은 예상치 못한 입력이나 누락된 값에 대한 오류 확인을 제공하며, 각 코드 부분의 목적과 기능에 대한 설명이 주석으로 달려 있습니다.

PrevioususePageNavigationNextuseTimer

Last updated