[React] react-helmet 과 react-helmet-async 차이

쏘소·2022년 9월 20일

목록 보기

8/13

현재 'world-map-note' 프로젝트에서 추억 메모를 생성하고 보는 지도는 생각하는 여러 페이지 중에 한 페이지이다. 때문에 카카오 map api sdk를 html의 head 에 직접 넣어주는 것 보단 map route 에서 지도를 열 때 동적으로 sdk를 가져오는 것이 좋을 것 같다고 생각하였다.
그래서 react-helmet을 사용해주었는데 다음과 같은 에러를 만났다.

구글링을 해보니 react-helmet을 사용하는 대신 react-helmet-async 를 사용해주면 해결된다고 하였다. 실제로 해보았더니 에러가 깔끔하게 사라지는 것을 확인할 수 있었다.

그러면 react-helmet과 react-helmet-async 의 차이는 무엇일까.

react-helmet

싱글 페이지 어플리케이션의 경우 처음 서버에서 받은 파일을 화면에 띄워주게 되는데 문서의 타이틀 또한 마찬가지 이다. 브라우저 단에서 라우팅이 변경되어도 이 값은 변함없이 유지된다. 따라서 화면 이동에 따라 타이틀을 변경하려면 헤더를 동적으로 변경해야만 하는데 이 때 사용할 수 있는 것이 react-helmet이다.

동작 원리

react-helmet은 다음과 같이 DOM API를 사용해서 직접 헤더를 변경한다.

const updateTitle = (title, attributes) => {
  // DOM 객체의  title 속성을 직접 변경한다.(라이브러리 코드 변경)
  document.title = title
}

react-helmet-async

공식문서에 보면 react-helmet-async 는

react-helmet relies on react-side-effect, which is not thread-safe. If you are doing anything asynchronous on the server, you need Helmet to encapsulate data on a per-request basis, this package does just that.

이다.
thread-safe 가 무슨 의미인지 몰라 찾아봤다. 스택오버플로우의 답변에 따르면