React에서 title을 변경하는 방법

SPA 인 React 에서는 페이지의 이름을 어떻게 변경할까?

helmet

useEffect를 사용하여 변경 할 수 있지만, helmet을 사용하면 메타데이터 까지 바꿀 수 있어 더 권장된다고 한다.

설치

npm i react-helmet
만약 TypeScript라면 react-helmet 라이브러리는 기본적으로 타입 정의 파일을 제공하지 않으므로, 타입 선언 패키지를 따로 설치해줘야 한다.
npm install --save-dev @types/react-helmet

사용

import { Helmet } from "react-helmet";
const LoginPage = () => {
  return (
    <>
      <Helmet>
        <title>로그인</title>
      </Helmet>
      <div>LoginPage</div>
    </>
  );
};

react-helmet-async

react-helmet도 기본적인 SSR 기능을 제공하지만, 동시성 문제로 인해 더 복잡한 서버 사이드 렌더링 환경에서는 비동기 관리가 어려울 수 있다. 고로 SSR에서 더 안전하고 비동기적 처리를 지원하는 react-helmet-async가 더 추천된다.

설치

npm i react-helmet-async

사용

import { HelmetProvider, Helmet } from "react-helmet-async";
const LoginPage = () => {
  return (
    <HelmetProvider>
      <Helmet>
        <title>로그인</title>
      </Helmet>
      <div>LoginPage</div>
    </HelmetProvider>
  );
};