React Helmet

React의 head를 관리할 수 있는 라이브러리

install

npm i react-helmet

• ts환경은 npm i --save-dev @types/react-helmet 추가 설치

usage

import { Helmet } from "react-helmet";

function App() {
  return (
    <div>
      <Helmet>
    	<title>Equip Helmet</title>
      </Helmet>
    </div>
  );
}

export default App;

• Helmet 컴포넌트 자식으로는 head의 데이터들을 추가할 수 있다.
• meta, css, title 등등

Typescript 'strict' warning

• Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code
• 위와 같은 경고가 발생한다면 npm i react-helmet-async를 설치한다.

import { HelmetProvider, Helmet } from "react-helmet-async";

function App() {
  return (
    <div>
      <HelmetProvider>
        <Helmet>
    	  <title>Equip Helmet</title>
        </Helmet>
      </HelmetProvider>
    </div>
  );
}

export default App;

참고
React Helmet
React Helmet Async