useTitle로 효율적인 Doc Title 설정하기

페이지 타이틀

웹사이트에 접속하면 브라우저의 상단 탭에서 페이지 제목을 볼 수 있다. 이 페이지 제목을 Document Title이라고 한다. Document Title은 가장 대표적인 웹사이트의 타이틀로, 각 페이지의 주제를 잘나타낼 수 있는 요소이자 해당 웹사이트를 사용하는 유저에게 현재 자신이 있는 우치를 알려주는 중요한 요소이다.

하지만 React는 SPA이고, 하나의 index.html을 가지기 때문에 각 페이지마다의 타이틀을 <title></title>요소로 변경할 수가 없다. react-helmet이라는 라이브러리를 사용하여 Document Title을 바꿀 수 있지만 라이브러리를 줄임으로써 좀 더 가벼운 앱을 만들 수 있지 않을까 하는 생각에 다음과 같이 커스텀 훅으로 만들어 봤다.

useTitle

import { useEffect } from 'react';

const useTitle = (title) => {
  useEffect(() => {
    const prevTitle = document.title;
    document.title = title;

    return () => (document.title = prevTitle);
  }, [title]);
};

export default useTitle;

useTitle은 unmount시까지 이전 페이지 타이틀이다가 새 페이지 mount하는 경우에 그 페이지의 타이틀로 바꿀 수 있는 커스텀 훅이다.

useTitle 적용

const Login = () => {
  useTitle('1nMarket - Login');

  // ...
};

다음처럼 커스텀 훅을 로그인 페이지에 작성하게 되면 다음과 같이 Document Title이 변경된 것을 확인할 수 있다.

추가: 웹접근성 개선

위에 작성한 것은 1nMarket - Login으로 페이지 타이틀을 정했지만 웹접근성을 개선한다면 사용자가 이미 1nMarket을 이용하는 것을 알고 있으니 Login - 1nMarket로 서브 페이지 이름이 앞에 나오는 것이 사용자 피로도를 낮출 수 있다.