[ React Hook ] 2. useTitle

 

# useTitle의 기능

 

import {useEffect, useState} from "react";

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

useTitle은 HTML에서 Head에 있는 title을 바꿔주는 기능이다.

 

상태에 따른 타이틀 변화를 주고싶을때 사용하는 Hook이다.

 

사용법 :  useTitle을 새로운 변수에 할당하고 컴포넌트에 넣어서 사용한다.

 

	const titleUpdater = useTitle("loading...");
	//타이틀의 디폴트를 "loading..." 으로 바꿔 줄 수 있다. 
    
 	setTimeout(()=> titleUpdater("Home"),5000);
 	//타임아웃을 추가하면 적용한 시간 후에(지금은 5초) 타이틀이 loading... => Home 으로 바뀐다.

useTitle은 아주 간단한 훅이기 때문에 추가 설명보다는 기본적인 useState와 useEffect의 기능적인 이해가 더 중요하다.