react-helmet

동적으로 메타데이터를 변경하기 위해서 React-Helmet을 사용한다.

//설치
npm install --save react-helmet

index.html

import { Helmet } from "react-helmet";

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

index.html 에서 head태그의 내용들을 모두 지우고 App.js에서 간단하게 title을 수정해보았다.

변경된 title

사진과 같이 웹페이지의 title이 변경된 것을 확인할 수 있다.

 

아래의 사진 처럼 favicon 이미지도 변경할 수 있다.

favicon 설정

function App() {
  return (
    <Helmet>
      <title>choisuhyeok</title>
      <link rel="icon" href={favicon} />
    </Helmet>
  );
}

기존의 태그에 link태그를 이용해서 favicon을 설정해주었다. 

 

나머지는 나중에 더 공부해야지...