[React/실전형 리액트 Hooks/노마드코더] #2.1 useTitle

 

강의 출처

 

https://youtu.be/J8E9CEyBbWo

 

 

 

 

 

---

 

useTitle

 

 

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

const useTitle = (initialTitle) => {
    const [title, setTitle] = useState(initialTitle);
    const updateTitle = () => {
        const htmlTitle = document.querySelector("title"); //html에 head에 존재하는 title 태그 가져오기
        htmlTitle.innerText = title;
    };
    useEffect(updateTitle, [title]);    //component가 mount될 떄, title이 업데이트될 때 렌더링
    return setTitle;
}

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 5000); //5초 후에 title이 "home"으로 바뀜
  return (
    <div className="App">
      <div>Hi</div>
    </div>
  )
};

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

 

 

이 코드는 custom Hooks인 useTitle을 사용하여 title을 업데이트하는 간단한 예제이다.

useTitle 함수는 인자로 초기 title을 받는다.

useState를 사용하여 title이라는 상태와 setTitle이라는 상태를 업데이트하는 함수를 생성한다.

updateTitle 함수는 title의 값을 HTML의 title 태그에 업데이트하는 역할을 한다.

useEffect 훅에서 updateTitle 함수를 실행한다.

이때 title 값이 변경될 때마다 업데이트를 실행하도록 두 번째 인자로 [title]을 전달한다.

이것은 title 값이 변경될 때마다 updateTitle 함수를 실행하도록 한다.

그리고 useTitle 훅에서는 setTitle을 반환한다.

이렇게 함으로써, 다른 컴포넌트에서 setTitle 함수를 사용하여 title을 업데이트할 수 있다.

App 컴포넌트에서는 useTitle 훅을 사용하여 초기 title 값을 "Loading..."으로 설정하고,

setTimeout 함수를 사용하여 5초 후에 title 값을 "Home"으로 변경하도록 설정하였다.

따라서, 이 코드는 useTitle 커스텀 훅을 사용하여 컴포넌트가 마운트 될 때 title을 설정하고,

title 값을 변경할 수 있는 방법을 보여주는 예제이다.

 

 

아래는 코드 실행 결과이다.

 

실행했을 때

 

setTimeout 함수 실행된 후 (5초가 지났을 때)

 

 

 

 

---

 

다음 포스팅에서는 useClick react hooks을 만들어보도록 하자 !