react-helmet-async로 meta 태그 설정

1. react-helmet-async이란?

리액트로 브라우저의 meta데이터인 <title>를 설정하는 기능을 한다.

2. Install

npm i react-helmet-async

3. How to use

3.1 src/index.js

3.1.1 모듈 불러오기

import { HelmetProvider } from ‘react-helmet-async‘; 

3.1.2 공급하기

React.render(
    <HelmatProvider>
        <App />
    </HelmatProvider>
)

3.2 src/App/App.js

3.2.1 모듈 불러오기

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

3.2.2 적용하기

아래와 같이 설정 시 페이지의 title이 React Helmat으로 보이게 된다.

function App() {
    return (
        <Helmat>    
            <title>React Helmat</title>
        </Helmat>    
     ) 
}

3.3 우선권

Helmat의 우선권은 더 깊숙한 곳에 위치한 Helmat이 우선권을 가진다. 예를 들어 App과 MyPage 컴포넌트 모두 Helmat을 사용한다면 MyPage가 App의 내부에 들어있기 때문에 MyPage의 title이 표시된다.

/mypage에 들어가보면 my page가 title에 표시된 것을 확인 할 수 있다.

function App() {
    return (
        <Helmat>    
            <title>React Helmat</title>
            <Route component={MyPage} path=“/mypage“ />
        </Helmat>    
     ) 
}

function MyPage() {
    return (
        <Helmat>    
            <title>my page</title>
        </Helmat>    
     ) 
}

4. 참고

• react-helmet-async로 meta 태그 설정하기