React
react-helmet 페이지 제목 설정하기
용용it
2024. 11. 15. 20:22
오늘은 React-Helmet에 대해 알아보자
react-helmet은 React에서 HTML의 <head> 태그를 쉽게 관리할 수 있게 해주는 오픈 소스 라이브러리이다.
주로 웹 애플리케이션의 페이지 제목(title), 메타 태그(meta tags) 등을 동적으로 설정하거나 변경할 때 사용된다.
react-helmet 장점
- SEO(검색 엔진 최적화): 웹사이트의 메타 정보를 동적으로 설정함으로써 검색 엔진이 페이지를 더 잘 인식하도록 도와준다.
- 동적 제목 변경: 페이지마다 제목과 메타 정보를 다르게 설정할 수 있어서, 웹 애플리케이션이 더 유연하게 관리된다.
예시
네이버 웹툰으로 예시를 들어보면,
각 탭들의 title이 다른 걸 볼 수 있다.
이렇게 되면 사용자 입장에서도 한 눈에 어떤 탭인지 명확하게 알 수 있다.
설치
npm install react-helmet
명령어를 입력해서 설치한 후,
요로코롬 원하는 페이지의 컴포넌트에 코드를 작성하면 된다.
참조는 필수
잘 적용되었나 확인해보자
9ood