[React] CustomHook πŸ‘‰ useTitle

μŠΉλ―Έλ‹ˆΒ·2021λ…„ 7μ›” 10일
0

React

λͺ©λ‘ 보기
9/10

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>
  ) 
}
profile
Web Frontend Developer

0개의 λŒ“κΈ€