[TIL] 02.12 react-helmet을 적용해보자

misinterpriter(오역자들) 웹페이지가 검색이 되도록 만들기 위한 방법을 찾다가 react-helmet 이라는 것을 알게 되었다. 

Helmet 은 문서 헤드에 대한 모든 변경사항을 관리할 수 있는 React component이다. 

 

설치방법

//yarn 으로 할 경우
yarn add react-helmet

//npm 으로 할 경우
npm install react-helmet

사용법

import React from 'react';
import { Helmet } from 'react-helmet';


const App = () => {
  <div className="app">
    <Helmet>
	  <title>Misinterpriter</title>
      <meta charSet="utf-8" />
      <meta name="description" content="번역글 공유 사이트" />
    </Helmet>
  </div>
};

export default App;

<Helmet> 테그로 감싸준 다음 title을 설정해 주면 된다. 

title 테그 이외에도 base, meta, link, script, noscript, style 이러한 테그들을 지원한다고 한다.