// useTitle.js
import { useState, useEffect } from "react";
const useTitle = (initialTitle) => {
const [title, setTitle] = useState(initialTitle); // 입력받은 파라미터로 초기값 설정
const updateTitle = () => { // title 변경 함수
const htmlTitle = document.querySelector("title"); // <title> 태그 찾기
htmlTitle.innerText = title; // <title> 태그에 변수 title값을 넣음
};
useEffect(updateTitle, [title]); // title 값이 바뀔 때마다 title 변경 함수 실행
return setTitle; // title을 변경할 수 있는 setTitle을 반환
};
export default useTitle;
// index.js
import React from "react";
import ReactDOM from "react-dom";
import useTitle from "./useTitle";
const App = () => {
const titleUpdater = useTitle("Loading..."); // titleUpdater에 useTitle 반환값이 들어감
setTimeout(() => titleUpdater("Home"), 3000); // 3초후에 titleUpdater("Home") 실행
return (
<div>Hello</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
title을 수정하는 코드를 useTitle.js에 따로 작성하였습니다.
useEffect를 통해 title변수가 수정 될때 <title>태그 안의 값이 수정되는 함수를 실행하게 하였습니다.
title을 수정할 수 있는 코드를 반환함으로서 위 코드에서 titleUpdater를 통해서 title을 수정할 수 있습니다.
'React' 카테고리의 다른 글
[React] click 이벤트 (0) | 2021.01.08 |
---|---|
[React] useRef (0) | 2021.01.08 |
[React] 배열 값 동적 출력 (0) | 2021.01.08 |
[React] Input (0) | 2021.01.08 |
[React] useState (0) | 2021.01.08 |