끄적끄적 코딩
Published 2021. 1. 8. 16:37
[React] title React
// 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

검색 태그