[React] useEffect를 통한 <title>변경

zzincode·2023년 11월 4일

React

목록 보기
8/20
post-thumbnail
const useTitle = (initialTitle) => {
    const [title, setTitle] = useState(initialTitle); //초기값 설정

    const updateTitle = () => { 
      const htmlTitle = document.querySelector("title");
      htmlTitle.innerHTML = title; // <title>태그에 변수 title값 넣기
    };

    useEffect(updateTitle, [title]); // title의 값이 변할 때마다 updateTitle함수 실행
    return setTitle;
  };

  const changeTitle = useTitle("Loading...");
  setTimeout(() => changeTitle("Home"), 3000); //3초 후에 changeTitle("Home")

return (
	<button onClick={() => changeTitle("Home")}>Home</button>
	<button onClick={() => changeTitle("Skill")}>Skill</button>
	<button onClick={() => changeTitle("Contact")}>Contact</button>
	)
};

0개의 댓글