[React] CustomHook 👉 useTitle

https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다.

1. useTitle 이란?

이거 바뀌게 하는 것!

2. useTitle 작성

import React, { useEffect, useState } from "react";

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    // index.html에 있는 title 태그
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  }
  // 타이틀이 변경될 때 updateTitle
  useEffect(updateTitle, [title]);
  return setTitle;
}

export default useTitle;

3. useTitle 사용

• setTimeout도 간단하게 사용할 수 있다.

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 5000);

  return (
    <div className="app">
    	hellow
    </div>
  ) 
}