성장을 위한 기록

React(리액트)에서 meta 태그 사용하기 (helmet) 본문

FE (Front End) (구)/React

React(리액트)에서 meta 태그 사용하기 (helmet)

B_Tae 2022. 6. 7. 09:58

MPA방식으로 HTML을 작성할 때 우리는 페이지별로 title과 meta태그 og를 작성했다.
하지만, react는 SPA방식으로 HTML이 하나만 존재한다. 그럼 우린 하나의 meta태그만 사용가능 한가? 당연히 아니다 !

다른 JS코드로 값을 변경하던지 우리는 react-helmet이라는 패키지를 이용 할 수 있다.

사용 방법

  1. 설치 yarn add react-helmet || npm install --save react-helmet
  2. 사용하기
    import {Helmet} from "react-helmet"
    <Helmet> 
    <title>page one</title>
    <meta property="og:title" content="page one" />
    <meta property="og:description" content="hi there :) page one" />
    <meta property="og:image" content="%PUBLIC_URL%/logo192.png" /> 
    </Helmet>
    방식으로 컴포넌트에 meta 태그를 작성할 수 있다. (사실 작성보다는 변경이라 생각하는게 맞는 것 같다.
Comments