react-helmet-async

포트폴리오 사이트 안에 있는 페이지 이동 시, 페이지 title을 변경하기 위해 react-helmet-async를 사용하였다.

1. 설치

yarn add react-helmet-async

npm i react-helmet-async

2. Router 위에 HelmetProvider 감싸주기

import { HelmetProvider } from "react-helmet-async";

...
root.render(
    <HelmetProvider>
      <RouterProvider router={router} />
    </HelmetProvider>
);

3. 타이틀이 필요한 컴포넌트 안에 title 전달하기

<Helmet>
  <title>Project | Movie Selector</title>
</Helmet>