📚 Reference

📜 Chapter

react-helmet-async

‣

‣

‣

react-helmet

react-helmet

header를 변경해야 할 때

React나 Vue.js로 개발할 때 보통은 마운트 된 <body> 태그 안의 특정 요소에서만 작업하기 때문에 이것에 대해 신경 쓸 일이 별로 없었다. 그리고 이미 서버에서 헤더 값을 계산해 브라우저로 내려주었기 때문에 관리할 필요도 없었다.

1. 문서 타이틀을 변경할 때

싱글 페이지 어플리케이션은 화면을 이동할 때마다 페이지를 요청하는 것이 아니다.
그렇기 때문에 문서의 타이틀은 맨 처음 서버에서 받은 값을 사용한다.
브라우저 단에서 라우팅이 변경되어도 이 값은 변함없이 유지된다.
화면 이동에 따라 타이틀을 변경하려면 헤더를 동적으로 변경해야만 하는데 이 때 document.title을 사용해서 헤더를 변경한다.

2. 소셜 서비스에 포스팅 할 때

페이스북이나 트위터에 페이지 링크를 공유할 때, 공유할 페이지의 썸네일과 타이틀을 조합해 이쁜 포스팅을 만들어 주는 경우가 있다.