스펜서 개발블로그

[React] react-helmet-async로 헤더 관리하기 본문

Frontend/React

[React] react-helmet-async로 헤더 관리하기

스펜서 2024. 7. 26. 17:28

react-helmet-async란

'react-helmet-async' 라이브러리는 리액트 애플리케이션의 <head> 부분을 동적으로 관리할 수 있도록 도와주는 라이브러리이다.

'react-helmet'의 문제점을 해결하기 위해 만들어진 포크(fork) 버전이며 'react-helmet'이 'react-side-effect'에 의존하고 있어 서버 사이드 렌더링 환경에서 비동기 작업을 처리할 때 문제가 발생할 수 있다.

 

사용하는 이유

리액트는 SPA(Single Page Application)이다.

그래서 각 페이지별로 title이나 meta 태그 등을 설정하기 어렵고, 크롤러가 모든 페이지의 정보를 가져갈 수 없어 검색엔진최적화(SEO)에 좋지 않다.

이런 단점을 보완하기 위해 각 페이지별로 title과 meta 태그를 별도로 관리하고, 조금이라도 검색엔진최적화를 하기 위해 사용한다.

 

설치 방법

	npm install react-helmet-async

 

또는 yarn을 사용하여 설치한다.

 

사용 방법

index.js에서 App을 <HelmetProvider> 태그로 감싸준다.

    import ReactDOM from "react-dom/client";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import { BrowserRouter } from 'react-router-dom';
    import { HelmetProvider } from "react-helmet-async";

    const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
    );
    root.render(
        <HelmetProvider>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </HelmetProvider>
    );

    reportWebVitals();

 

 

그 다음 각 페이지에서 <Helmet>을 사용하여 title과 meta 태그를 설정한다.

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

    const Home = () => {
      return (
        <>
          <Helmet>
            <title>Main Page</title>
            <link rel="canonical" href="https://www.test.com/" />
          </Helmet>
          <div>
            <h1>테스트 페이지</h1>
          </div>
        </>
      );
    };
    export default Home;

 

 

 

'Front-End > React' 카테고리의 다른 글

[React Hooks (2)] useMemo() 알아보기  (5) 2024.11.08
[React Hooks (1)] Hooks란? 그리고 useState()  (0) 2024.08.04
[VSCode] React 서버 필수 명령어  (0) 2023.12.05
'Frontend/React' Related Articles more