[React JS] React Helmet (-async)

강서현·2022년 9월 24일
0

React Helmet.

HTML의 head/meta/title 태그와 비슷한 기능을 한다.
react-helmet은 여러 멀티 스레드에서 접근할 수 없다는 이유로 작동하지 않아, 이와 비슷한 react-helmet-async를 사용했다.

npm i react-helmet
npm i react-helmet-async
npm i --save-dev @types/react-helmet //TS 사용
import { Helmet } from "react-helmet";

리액트 기본 타이틀은 'React App'인데 다음과 같이 바꿀 수 있다.

<Helmet>
  <title>코인</title>
</Helmet>

또는 다음과 같이 값을 가져와서 작성할 수도 있다.

<Helmet>
 <title>
   {state?.name ? state.name : loading ? "Loading..." : infoData?.name}
 </title>
</Helmet>

타이틀 변경을 제외하고 meta 태그 기능은 사용하지 않았는데, 아래와 같은 문제가 있는 듯 하다.
https://github.com/nfl/react-helmet/issues/377
(구글봇이 react-helmet으로 작성한 title이랑 description을 크롤링 하지 못한다. 다른 플랫폼도 같은 문제가 다수 있었다.)

0개의 댓글