[ 리액트(React) ] console 창에 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code 뜰 때

📍 console 창에서 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code 뜰 때

병과 테스트 프로젝트를 잘 진행하고 있다가 갑자기 console 창에 Warning이 떴다.

 

 

구글링을 해보니까 nfl/react-helmet#548, nfl/react-helmet#623 에 비슷한 글이 있었는데 원인은 strict mode에서 UNSAFE_componentWillMount를 사용하는 것은 권장하지 않고 가끔 버그를 일으킬 수 있다는 내용이었다.

 

해결방법을 찾아보니 보통 React-helmet 버전이 ^6.0.0 이하에서 많이 발생한다는 내용이 대다수였다. 하지만 내가 설치한 React-helmet 버전은 ^6.1.0이었고, 버전이 낮아서 발생한 것 같진 않아 보였다. (혹시 버전이 ^6.0.0이하라면, 라이브러리 업데이트를 하고 나서 import 할 때 import { Helmet } from "react-helmet"로 작성해보자.)

 

다른 글 중에 react-helmet-async를 사용해보라는 글이 있어서 해당 라이브러리를 다운로드하고 다음과 같이 작성했더니 더 이상 warning 창이 뜨지 않았다. 깃허브에서 react-helmet-async 패키지에 들어가보니까 Helmet과 사용법은 동일하고 스레드가 안전하지 않은 react-side-effect에 의존한다고 나와있다.

 

해당 패키지는 서버에서 비동기 작업을 수행할 경우 데이터 요청 별로 Helmet을 캡슐화 하기위해 사용하는 패키지라고 나와있다. 그냥 Helmet을 캡슐화 해준다고 생각하면 편하다. 사용법은 다음 코드처럼 사용하자.

 

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

const Landing = () => {
  return (
    <>
      <HelmetProvider>
        <Helmet>
          {/* contents... */}
        </Helmet>
      </HelmetProvider>
    </>
  )
}

export default Landing;

이후 console.log창에 더 이상 Warning이 뜨지 않았다.