react 에서 title 컨트롤 하기
마스터욱
0
31
0
0
2021-06-24 13:43:58
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import useTitle from "./title";
const Title = () => {
const titleUpdater = useTitle("xxx"); // titleUpdater에 useTitle 반환값이 들어감
setTimeout(() => titleUpdater("xxx"), 100); // 3초후에 titleUpdater("Home") 실행
return (
<div></div>
);
};
ReactDOM.render(
<React.StrictMode>
<Title />
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
title.js
// title.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;
뭔 타이틀 하나 바꾸는데도 이렇게 손이 많이 가냐 -_-;
