HeartRing [4] react-helmet

BBAKJUN·2022년 1월 30일

HeartRing

목록 보기

4/6

HeartRing 프로젝트에 헬멧을 씌워주자

react-helmet은 무엇일까..?


<!DOCTYPE html>
<html>
    <head>
        <title>HeartRing</title>
    </head>
    <body>
        <h1>HeartRing</h1>
        <h2><title> 헤헷</h2>
         
<p>여긴 내 벨로그라구</p>
 
    </body>
</html>

HTML은 Head와 Body 로 이루어져있다.
Head안에서 title태그가 존재하는데

주소창 위에 홈페이지 타이틀이 보이는가??
HTML의 <title> 태그는 HTML 문서의 제목을 정의하는 데 사용된다.

이를 리엑트에서 쉽게 사용하게 해주는 react-helmet 라이브러리가 존재하는데 6.1.0버젼에서 이상하게 오류가 나고있다..

이를 고치려고 대략 30분동안 구글링한결과,,,

이미 이런 이슈가 나와있었네??

원인은 strict mode에서 UNSAFE_componentWillMount를 비권장하고 오류가 날수도있다는 내용이었다.

react-helmet 버젼이 6.0.0 이하에서 일어난다는데,,,,

    "react-helmet": "^6.1.0",

히히 머가 문젤까 보다가

그냥 간단하게 react-helmet-async 를 사용하면 되는것이었음 ㅋ

본론 시작

HeartRing 프로젝트는 Next.js로 세팅되어있다.
_app.tsx , _document.tsx 파일이 존재한다.
이중 _app.tsx파일을 살짝 변경해줄것이다.

상수값 설정

프로젝트 함께 진행하는 친구가 주석처리했던것을 다시 살려주자.
앞으로 pages 디렉토리에 라우트가 추가될때마다 여기다 넣어줄것이다.

_app.tsx 변경

import React, { useEffect, useState } from 'react';
import type { AppProps } from 'next/app';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { useRouter } from 'next/router';
import { ROUTES } from '../constants';

import Layout from '../components/layout/AppHeader';
import '../styles/globals.css';

const MyApp = ({ Component, pageProps }: AppProps) => {
  const [title, setTitle] = useState('');
  const pathName = useRouter().pathname;

  useEffect(() => {
    ROUTES.map((route) => {
      if (route.PATH === pathName) {
        setTitle(` - ${route.LABEL}`);
      }
    });
  });

  return (
    <>
      <HelmetProvider>
        <Helmet>
          <title>HeartRing{title}</title>
        </Helmet>
      </HelmetProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
};

export default MyApp;