#3. useTitle hook

useTitle

---

문서의 제목을 업데이트 시켜주는 걸 담당하는 hook

import { useEffect, useState } from "react";

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("youngseo"), 5000);
  return (
    <div className="App">
      <div>Hi</div>
    </div>
  );
};

export default App;

• const htmlTitle () = document.querySelector("title") => document의 <title> 태그를 의미한다.
• useEffect (updateTitle, [title]) =>  컴포넌트가 mount 될 때 upDateTitle 함수를 실행, title이 변하면 updateTitle 함수를 실행한다.
• titleUpdater가 어디선가 불리면 (titleUpdater는 현재 setTitle을 리턴 받았으므로) title의 상태를 변화시킬 수 있고 title의 상태가 변화하면 useEffect에 의해 updateTitle 함수가 다시 실행되어 <title> 태그의 text를 바꾼다.
• setTimeout(()=> titleUpdater("youngseo"), 5000); => 5000ms 후에 "youngseo" 로 document의 title이 바뀐다.