Frontend/React Hook

[React-Hooks] React Hooks - useTitle

갈푸라떼 2022. 7. 12. 16:52

* useTitle

  • 보통 Title을 수정하기 위해서 Helmet라이브러리를 이용하는데 hook을 이용하여 functional hooks방식으로 만들어 볼 예정
  • titleUpdater는 useTitle의 함수를 사용하며 매개변수로 "Loading..."를 받고있다.
  • updateTitle에 의해서 title의 값이 할당되며 useEffect를 이용해서 title이 변경될때마다 updateTitle을 실행시켜준다.
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("Home"), 3000);
  return (
    <div>
      <div>Hello</div>
    </div>
  )
}