리액트는 SPA라, 단 하나의 index.html 만을 읽기 때문에 각각의 페이지에 대한 정보를 읽지 못한다.
react-helmet-async 라이브러리를 사용하면 페이지별로 title을 만들 수 있다

네이버의 경우 메인페이지로 가면 NAVER, 메일로 가면 받은메일함으로 표시가 바뀐다.
위처럼 바꿔주기 위한 방법!

라이브러리 설치

라이브러리 npm

npm i react-helmet-async

위 명령어를 입력해 라이브러리를 설치한다.

main.tsx 파일 변경

나는 vite + typescript로 리액트를 빌드했기 때문에 파일명은 사람마다 다를 수 있음.
App 컴포넌트가 있는 파일을 수정하기.
아래처럼 App 컴포넌트를 HelmetProvider 컴포넌트로 감싸준다

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { HelmetProvider } from "react-helmet-async"; // 이부분 추가

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <HelmetProvider> // 이부분 추가
      <App />
    </HelmetProvider>
  </React.StrictMode>
);

컴포넌트에 Helmet import

Helmet으로 title 태그를 감싸준다

import { Helmet } from "react-helmet-async"; // 추가

const 타이틀바꾸고싶은컴포넌트 = () => {
  return (
    <>
      <Helmet>
        <title>바꾸고싶은타이틀이름</title>
      </Helmet>
    </>