문서 제목을 업데이트 시켜주는 것을 담당하는 hooks을 작성할 것이다.

보통 이를 위해서는 halmet을 사용하는데 문서 제목을 업데이트 하는 functional hooks의 방식으로 만들어 볼 것이다.

import "./styles.css";
import React, { 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]); //한번 useEffect가 mount 되면  html title은 loading되는 것이다.
  // 앞은 componentDidMount 이고 뒤는 componentWillUpdate 이다
  return setTitle;
  //하나의 값이 바뀌면 setTitle을 이용할 것이고 이것이 시발점이 되어 모든 것들이 작동하게 된다.
};

//App
export default function App() {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 10000);

  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>
    </div>
  );
}

사이트에서 확인해 보면

loading 으로 바뀌는 것을 볼 수 있다.