Hook - useTitle

원종서·2021년 8월 25일
0

hook

목록 보기
3/11

useEffect

componentDidMount, updateMoude 역활을 함
첫번째 인자 : 실행시킬 함수
두번째 값: 의존 값 DidMount는 작동 하되 ,두번째 값이 있따면 그 두번째 값(리스트)에 있는 state값이 변할때만 작용
componentDidMount에만 함수가 작동되게 하고 싶다면
useEffect(FUNCION , []);

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

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

  useEffect(updateTitle, [title]);
  // componentDidmount 때 와  title 이 바뀔때마다 updateTitle을 실행

  return { setTitle };
};

const App = () => {
  const { setTitle } = useTitle("Loading...");
  setTimeout(() => setTitle("Change title!"), 3000);

  return <div className="App">h1</div>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

0개의 댓글