useDocumentTitle

useDocumentTitle (문서 제목 설정)

useDocumentTitle 훅은 React.useLayoutEffect를 사용해 document.title 속성을 설정해요. 서버 사이드 렌더링 중에는 호출되지 않으며, 클라이언트 전용 애플리케이션에서 사용해요.

출처: 문서

본문

@mantine/hooks 패키지의 useDocumentTitle 훅은 React.useLayoutEffect 훅으로 document.title 속성을 설정해요. 서버 사이드 렌더링 중에는 useDocumentTitle이 호출되지 않아요. 이 훅은 클라이언트 전용 애플리케이션에 사용하고, 동형(isomorphic) 렌더링 환경에서는 (예를 들어 react-helmet 같은) 더 고급스러운 방법을 고려하는 것이 좋아요.

아무 컴포넌트에서나 문서 제목으로 설정할 문자열을 인자로 넘겨 훅을 호출해요. useDocumentTitle은 값이 변경될 때마다 실행되며, 값이 빈 문자열이 아닐 때(뒤의 공백은 제거됨) 동작해요.

import { useState } from 'react';
import { useDocumentTitle, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';

function Demo() {
  const [title, setTitle] = useState('');
  useDocumentTitle(title);

  return (
    <Button onClick={() => setTitle(randomId())}>
      Set document title to random id
    </Button>
  );
}

정의 (Definition)

function useDocumentTitle(title: string): void;

더 알아보기 (Learn more)