리액트 Hooks - useTitle

import "./styles.css";
import React, { useState, useRef, useEffect } from "react";

const useClick = (onClick) => {
  if (typeof onClick !== "function") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []);
  return element;
};

export default function App() {
  const sayHello = () => console.log("say hello");
  const title = useClick(sayHello);
  return (
    <div className="App">
      <h1 ref={title}>Hi</h1>
    </div>
  );
}

useTitle 함수에 useState를 이용해 초기 타이틀 Loading 값을 주고(querySelector로 html title값을 지정)

setTimeout 함수로 5초뒤에 타이틀이 바뀌는 페이지 구현.

useRef라는 훅을 통해 html구조를 가져다가 자유롭게 쓸수있다.

 

useTitle함수 안에서 useState값 받아오고 useEffect로 바뀌는 값 감지!

App컴포넌트 내에서

  setTimeout(() => titleUpdater("Home"), 5000);

setTimeout에 바뀔 타이틀 Home 입력. useTitle이 return값으로 타이틀값을 반환하기 때문에 이렇게 입력해도 됐다.