React Helmet이란?
React에서 Web Head를 동적으로 변경할 수 있게 도와줍니다.
하지만 검색엔진 최적화를 하려면 서버 사이드 렌더링이 필요한 것으로 보인다.
React Helmet 사용법
설치하기
npm i react-helmet
npm i @types/react-helmet
ex)
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};
<Parent>
<Helmet>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
<Child>
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Helmet>
</Child>
</Parent>=>
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
what doesn't kill you makes you stronger