React useEffect 사용 title 변경하기

실습은 codesandbox를 이용했습니다.

 

app.js

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <button>Home</button>
      <button>Content</button>
      <button>Setup</button>
    </div>
  );
}

예시로 각각의 button 을 클릭했을 시 그 페이지로 이동했다고 가정하고 웹 title을 변경하도록 하겠습니다.

const useTitle = () => {
  const [title, setTitle] = useState(null);

  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerHTML = title;
  };
  useEffect(updateTitle, [title]);

  return setTitle;
};

우선 useTitle 함수를 작성하고 useEffect 를 이용하여 컴포넌트가 렌더링 된 이후에 updateTitle 을 실행하여 직접적으로 DOM에 접근하여 title을 변경시켜줍니다. 

 

export default function App() {
  const changeTitle = useTitle();
  return (
    <div className="App">
      <button onClick={() => changeTitle("Home")}>Home</button>
      <button onClick={() => changeTitle("Content")}>Content</button>
      <button onClick={() => changeTitle("Setup")}>Setup</button>
    </div>
  );
}

이제 useTitle에서 return 한 값 setTitle을 changeTitle 변수에 담아줍니다.

그리고 각각의 버튼에 onClick 이벤트로 changeTitle로 해당하는 title text를 넘겨줍니다.