CRA로 프로젝트를 만든다면 단 하나의 파일 index.html에서 head의 내용을 수정할 수 있습니다. 이로 인해 페이지별 head를 다르게 설정할 수 없습니다. 이때 react-helmet을 이용해 page 별 head의 정보에 접근해 SEO를 설정할 수 있습니다.

Main 페이지 react-helmet 적용

import React from 'react'
import { Helmet } from 'react-helmet'
import SearchForm from 'components/SearchForm'

const Main = () => {
  return (
    <div className={styles.wrapper}>
      <Helmet>
        <title>책책책 책을 찾읍시다!</title>
      </Helmet>
      <SearchForm />
    </div>
  )
}

const styles = {
  wrapper: 'flex items-center justify-center w-full h-screen'
}

export default Main