[React] React Hook-2.1 useEffect를 활용한 useTitle

< App.js >

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    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>
  );
}

 

< useTitle >

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

1.

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);

- useTitle 함수 인자로 initialTitle을 받는다.

- useState를 initialTitle로 초기화한다.  → title이 initialTitle로 초기화된다.

 

 

2.

  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };

- updateTitle 함수 : title을 queryselector로 가져와 innerText를 (useTitle의 인자로 받은)initialTitle로 변경한다.

 

3.

  useEffect(updateTitle, [title]);
  return setTitle;
};

- useEffect를 사용해 [title] 이 변경되면 updateTitle 함수가 실행되도록 한다.

- setTitle 함수를 return 한다.

 

 

< 새로고침 한 페이지 >

- title에 "Loading..." 문구가 뜬다.

 

< 5초 후 화면 >

- title이 "Home" 으로 변경 됨