[ React Hooks ] 리액트 훅, useEffect, 간단 예제

안녕하세요 상훈입니다.

리액트 훅으로 useEffect를 사용하여 웹페이지 접속 3초 후에 Title 부분이 바뀌는 예제를 작성하도록 하겠습니다.

App.js

import React, {useState, useEffect } from "react";

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


function App() {
  const titleUpdater = useTitle("Loading...")  // 시작할 때
  setTimeout(()=> titleUpdater("Home"), 3000)  // 3초 후 

  return (
    <div className="App">
      <div>Hi</div>    
    </div>
  );
}

export default App;

Loading... -> 3초후 -> Home 

으로 바뀌는 페이지 제목을 확인하실 수 있습니다.

결과 화면 캡쳐

끝~!!

 

 

강의 참고 : 니콜라스님

All Courses – 노마드 코더 Nomad Coders