이제 브라우저에서 페이지 제목이 REACTERS로 바뀐 것을 볼 수 있습니다.

▲ 그림 27-6 Helmet 사용하기

 

react-helmet-async에서는 더 깊숙한 곳에 위치한 Helmet이 우선권을 차지합니다. 예를 들어 App과 WritePage에서 Helmet을 사용할 경우, WritePage는 App 내부에 들어 있기 때문에 WritePage에서 설정하는 title 값이 나타납니다.

WritePage에서도 Helmet을 한번 사용해 보세요.

pages/WritePage.js

import React from 'react';
import Responsive from '../components/common/Responsive';
import EditorContainer from '../containers/write/EditorContainer';
import TagBoxContainer from '../containers/write/TagBoxContainer';
import WriteActionButtonsContainer from '../containers/write/WriteActionButtonsContainer';
import { Helmet } from 'react-helmet-async';

const WritePage = () => {
  return (
    <Responsive>
      <Helmet>
        <title>글 작성하기 - REACTERS</title>
      </Helmet>
      <EditorContainer />
      <TagBoxContainer />
      <WriteActionButtonsContainer />
    </Responsive>
  );
};

export default WritePage;

---