URL 에 따라 사이트 탭명 바꾸기

개요

• 사이트 URL 주소에 따라 사이트 타이틀 (탭)명이 바뀌어야 함.

적용 방법

1. 샘플 코드

useEffect(() => {
  const titleElement = document.getElementsByTagName("title")[0];
  const path = window.location.pathname;

  if (path === "/courseByType/3D") {
    titleElement.innerHTML = "메타버스 창작코딩";
  } else if (path === "/courseByType/JSPython") {
    titleElement.innerHTML = "앱 창작 코딩/프로젝트";
  } else {
    titleElement.innerHTML = "앱 창작 코딩/블록코딩";
  }
}, [])

• useEffect() 이용.
• document.getElementsByTagName("title")[0] 을 이용해 title 태그 0번째 순서를 불러옴.
• window.location.pathname 를 이용해 URL 의 “/” 뒤의 주소를 불러오도록 함.
• if 문을 사용해 주소 조건문을 선언하고, innerHTML 를 통해 사이트 타이틀 명이 바뀌게 함.

의외로 쉽고 간단하게 끝나죠잉 ? 😎

++
window.location 의 다른 기능들도 보고 싶다면 아래 사이트 참고 !!
-> https://hianna.tistory.com/464