[React] UNSAFE_componentWillMount 경고 해결: react-helmet-async 사용

📌 상황

프로젝트를 진행하면서 react-helmet 을 사용해 메타 태그를 동적으로 제어하고 있었는데, 계속 똑같은 경고 메시지가 떴다.

경고 메시지

 

🔍 문제 분석

이 경고 메시지는 "componentWillMount 를 React 의 엄격 모드에서 사용하면 버그가 나타날 수 있다" 는 의미였다.

구글링을 해보니, 이 문제는 react-helmet-async 를 사용하면 해결되는 문제였다.

 

기존에는 react-helmet 을 이용해 <Helmet> 컴포넌트를 사용하여 메타 태그를 설정하고 있었는데, react-helmet-async 를 사용하지 않아서 경고 메시지가 떴던 것이다.

import { Helmet } from 'react-helmet'

// HTML 문서의 메타 태그를 설정하여 SEO 와 페이지 정보를 제공하는 컴포넌트
const MetaTags = ({ title = 'HYEHYE', subTitle, description, keywords }) => {
  return (
    <Helmet>
      {/* 페이지 제목 */}
      <title>
        {title}
        {subTitle}
      </title>

      {/* 페이지의 설명 메타 태그 */}
      <meta name="description" content={description} />

      {/* 페이지의 주요 키워드 */}
      <meta name="keywords" content={keywords} />

      {/* 페이지의 작성자 정보 */}
      <meta name="author" content="방혜진" />
    </Helmet>
  )
}

export default MetaTags

 

++) componentWillMount ??

componentWillMount 는 React 클래스 컴포넌트의 생명주기 메서드 중 하나로, 컴포넌트가 마운트 되기 전에 호출된다.

이 메서드는 컴포넌트가 처음 렌더링되기 전에 초기 상태를 설정하거나 API 호출 등을 위해 사용될 수 있지만, 비동기 작업과의 충돌로 인해 문제가 발생할 수 있어서 React 16.3 이후로는 권장되지 않는다고 한다.

componentWillMount 대신 componentDidMount 를 사용하는 것이 좋다

 

++) componentWillMount 와 react-helmet 의 관련성 ??

componentWillMount 가 권장되지 않는 건 대충 알겠는데, 왜 react-helmet 을 사용하면 저런 경고 메시지가 뜨는 걸까?

관련 문서를 찾아보니 react-helmet 의 작동 방식이랑 관련이 있었다.

 

react-helmet 은 메타 태그를 설정하기 위해 DOM 을 업데이트하는데, 이 과정에서 componentWillMount 가 호출될 수 있다.

그러나 react-helmet 은 비동기적으로 작동하지 않기 때문에, 엄격 모드에서 비동기 작업과의 충돌이 발생하고, 경고 메시지가 뜨게 되는 것이다.

 

---

⚒️ 해결 방법

위에서도 말했듯, react-helmet-async 를 사용해서 해결할 수 있었다.

 <Helmet> 컴포넌트를 <HelmetProvider> 로 감싸주면 된다.

import { HelmetProvider, Helmet } from 'react-helmet-async'

// HTML 문서의 메타 태그를 설정하여 SEO 와 페이지 정보를 제공하는 컴포넌트
const MetaTags = ({ title = 'HYEHYE', subTitle, description, keywords }) => {
  return (
    <HelmetProvider>
      <Helmet>
        {/* 페이지 제목 */}
        <title>
          {title}
          {subTitle}
        </title>

        {/* 페이지의 설명 메타 태그 */}
        <meta name="description" content={description} />

        {/* 페이지의 주요 키워드 */}
        <meta name="keywords" content={keywords} />

        {/* 페이지의 작성자 정보 */}
        <meta name="author" content="방혜진" />
      </Helmet>
    </HelmetProvider>
  )
}

export default MetaTags

 

❓ react-helmet-async 를 사용하면 해결되는 이유가 뭘까?

react-helmet-async 는 Context API 를 활용하여 메타 태그의 상태를 관리하기 때문이다. Context API 는 React 에서 전역적으로 데이터를 공유할 수 있는 기능으로, 여러 컴포넌트가 동일한 데이터를 쉽게 사용할 수 있도록 도와준다. 이렇게 하면 여러 컴포넌트에서 동시에 메타 태그를 업데이트해도 서로 충돌하지 않고, 비동기적으로 안전하게 설정할 수 있다.

 

기존의 react-helmet 은 동기적으로 메타 태그를 처리하기 때문에 여러 컴포넌트에서의 업데이트가 비효율적이고 오류를 유발할 수 있었는데, react-helmet-async 는 이러한 문제를 해결하여 메타 태그의 일관성과 안정성을 보장한다.

• react-helmet: 비동기 처리 부족으로 경고 발생
• react-helmet-async: Context API 사용으로 충돌 없이 안전하게 메타 태그 업데이트

 

---

📝 결론

react-helmet 에서 발생하는 경고 메시지는 react-helmet-async 를 사용하여 해결할 수 있다.

 

---

💡 참고 문헌

https://www.npmjs.com/package/react-helmet

react-helmet

https://www.npmjs.com/package/react-helmet-async

react-helmet-async

https://legacy.reactjs.org/docs/strict-mode.html

Strict Mode – React