[React] 페이지별 title 메타태그 설정하기

useEffect를 사용하여 html 안의 title 을 변경할 것이다.
또 다른 방법으로는, react에서는 helmet를 사용한다.

react-helmet의 동작 방식

How do you set the document title in React?

Functional Hooks

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

const MyComponent = () => {
  useTitle("New Title");
  
  return (
    <div>
     ...
    </div>
  )
};

• useEffect 가 mount 될 때, title 은 props으로 전달된 "New Title" 이 되는 것이다.