Hook in React - useTitle

note) useTitle 이 호출되면, 안의 useState 안의 title 은  “Loading..” 으로 초기화되고,  useTitle 안의 useEffect 가 mount 될때 updateTitle 이 호출되면서 htmlTitle.innerText 에 의하여 html title 이 Loading 으로 setting이 된다. 

이후 timer 에서 useTitle이 호출되면서 useState 안의 title 은 "Home" 으로 초기화되고,  useTitle 안의 useEffect 은 title 이  변경됨에 따라 useEffect 에 등록된  함수가 다시호출이 되어 html title 이 다시 변경이된다.  멋진 코드이다.

 

note) 아래 code 를 copy & paste 하여  돌리면  custom hook function 을 TEST 할 수 있다.

 

import { useEffect, useState } from "react";

export const useTitle = initialTitle => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title"); // title element를 얻어오는 방법  
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

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

 

note) 위는 아래의 교육과장을 이수하면서 정리한 것이다.

https://nomadcoders.co/react-hooks-introduction/lobby?utm_source=free_course&utm_campaign=react-hooks-introduction&utm_medium=site