[React] 각 페이지 title 설정(helmet 사용)

React는 SPA(single Page Application)로 검색 최적화(SEO)가 어려운데, 이를 보완해주기 위해 Helmet을 설치하여 사용하게 되었다. 처음에는 그냥 react-helmet을 사용하였으나, 오류가 생겨 react-helmet-async를 사용하게 되었다..!

1. npm에서 react-helmet-async를 찾아 설치
   
   vs코드의 cmd창에 npm i react-helmet-async를 입력하여 install
   

2. src -> components 안에 PageTitle이라는 이름으로 컴포넌트를 생성하였음
   
   우선은 기본인 모양은 잡아주고
   

3. 이제부터가 중요한데, react-helmet-async에서 Helmet과 HelmetProvider을 import시켜서 아래처럼 작성해준다.
   

4. 작성이 끝났으면 title을 지정해줄 js파일로 넘어가서 Helmet을 사용한 컴포넌트를 import시켜준다!
   

5. 잘 적용되었는지 확인해주자