[리액트]Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code

상황

react-helmet을 사용했더니 아래와 같이 에러가 떴다.

원인

열심히 구글링해보니 react-helmet-async 를 설치하면 해결된다더라
react-helmet으로 import 해오니 발생하는 문제였다.

//수정 전
import { Helmet } from "react-helmet"

//수정 후
import { Helmet } from "react-helmet-async"

const Test = ()=>{
	return(
    <Helmet>
    	<title>react-helmet</title>  
    </Helmet>
      
    )
}
export default Test;

해결

console 창에 에러없이 문제 해결!!
react-helmet 이라는 패키지는 의 태그의 값을 변경하거나 추가하고자 할 때, DOM API를 사용해서 직접 헤더를 변경하는 방식이다.
react-helmet-async 는 react-helmet 과 사용법은 동일하지만, React 트리에 클라이언트와 서버에 가 포함되어 있다는 점이 다르다. 즉, 기존 react-helmet 의 문제점을 보완한 버전인 것 같다.
실제로 블로그를 보면 react-helmet 에서 보완 할 우선 순위를 언급하면서 react-helmet-async로 인하여 해결되었다고 한다.

*블로그에서 언급한 helmet-async를 만들기 위한 우선순위(영어가 부족해서 번역기로 이해하려 노력했다 ㅠㅠ)

1. 현재 요청에 대해서만 서버의 helmet 부작용 범위를 지정한다. 데이터 범위가 적절하면 비동기식으로 요청 간에 데이터가 누출될 수 없다.
2. 최신 React API를 사용하려는 사이트를 차단하지 않도록 Helmet이 최신 리액트16방식으로 작성되었는지 확인한다.

이제 각 요청에 대한 "상태"는 의 인스턴스 내에 보관되고, 각각 새 서버 요청은 새로운 상태를 유지하는 새 인스턴스를 인스턴스화한다고 한다.
즉, 새로운 요청이 들어오면 새로운 요청을 그룹화/모듈화(?) 하는 것이라고 이해했다!

혹시 정확한 개념을 아시는 분은 댓글로 설명 부탁드리겠습니다

---

참고자료
블로그
react-helmet 동작 방식