React Helmet

React Helmet

• title을 바꿔주는 역할을 함

• Helmet을 사용하려면 모든 Helmet컴포넌트들이 Helmet Provider안에 있어야 함

• 설치

  npm i react-helmet
   npm i @types/react-helmet

• Ex(typescript)
  - App.tsx

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

      <Helmet>
        <title>Velog</title>
      </Helmet>

   - index.tsx

      import React from "react";
      import { HelmetProvider } from "react-helmet-async";
      import App from "./App";

      ReactDOM.render(
          ...
            <HelmetProvider>
              <App />
            </HelmetProvider>
          ...
      );

• 컴포넌트 활용하기 Example
  - PageTitle.js

        import {Helmet} from "react-helmet-async"

        function PageTitle({title}) {
          return <Helmet>{title} | Homepage </Helmet> 
        }

        PageTitle.propTypes = {
          title: PropTypes.String.isRequired,
        }

        export default PageTitle;

    - App.js

      	<PageTitle title="Login" />

https://nomadcoders.co/instaclone/lobby
https://nomadcoders.co/nuber-eats/lobby
https://www.npmjs.com/package/react-helmet