각 페이지 title 변경하기

Next.js에서는 'next/head'에서 Head를 import해 title을 변경해주면 되지만, React는 SPA 방식이기 때문에 하나의 index.html만 크롤링되어 각 페이지에 대한 정보를 나타내기 어렵다.

웹사이트 탭 이름을 동적으로 변경하고 싶어 react-helmel-async 라이브러리를 설치해 페이지마다 title을 달아주었다.

1. 라이브러리 설치

$ npm install react-helmet-async

2. index 컴포넌트 수정

• HemletProvider로 app 컴포넌트를 감싸준다.

// index.tsx

import ReactDOM from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';
import { QueryClient, QueryClientProvider } from 'react-query';
import { HelmetProvider } from 'react-helmet-async';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const queryClient = new QueryClient();

root.render(
  <HelmetProvider>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </HelmetProvider>
);

3. 각 페이지 별 title 설정

• 각 컴포넌트 내에 Helmet import 후 <Helmet> ~ </Helmet> 내에 작성해 줌.

// main

import { Helmet } from 'react-helmet-async';

const Main = () => {

  return (
    <>
      <Helmet>
        <title>내가 원하는 타이틀</title>
      </Helmet>
      
      ... 기존 return문...
      
    </>
  );
};

export default Main;

추가

메타 태그 추가함