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