React 앱에 동적 제목을 추가하는 방법

안녕하세요!

마지막으로 반응 헬멧을 사용하여 게시했습니다. 그 이후로 React Hooks를 사용하여 동일한 작업을 수행하는 방법을 찾았습니다. 두 가지 접근 방식 모두 문제를 해결합니다. 제 생각에는 이것이 더 간단합니다. 결국 선택합니다 :)

시작하자.

이 게시물에서는 웹 앱에 동적 제목 동작을 추가하기 위해 간단한 React Hook을 만드는 방법을 보여 드리겠습니다.

React Hooks가 무엇인지 잘 모르겠다면 관련된 모든 것을 읽을 수 있습니다. here

여기에 적용 가능한 예가 있는 리포지토리가 있습니다. GitHub Repo

요약

제목 변경을 처리하는 함수를 만듭니다.

응용 프로그램의 모든 페이지 구성 요소에서 사용하십시오.

1. 제목 변경을 처리하는 함수를 만듭니다.

제목을 변경하는 후크를 생성합니다. 이름은 useDocumentTitle.js입니다.

// useDocumentTitle.js
import { useRef, useEffect } from 'react'

function useDocumentTitle(title, prevailOnUnmount = false) {
  const defaultTitle = useRef(document.title);

  useEffect(() => {
    document.title = title;
  }, [title]);

  useEffect(() => () => {
    if (!prevailOnUnmount) {
      document.title = defaultTitle.current;
    }
  }, [])
}

export default useDocumentTitle

제목 매개변수가 변경될 때마다 이 후크를 사용하여 제목 변경을 처리합니다.

여기에 몇 가지 참고 사항:

이 함수는 prevailOnUnmount 구성을 처리합니다.

이것은 선택 사항이지만 이 후크를 사용하는 구성 요소가 마운트 해제된 경우 동일한 제목을 유지하는 것이 좋습니다.

사용하지 않으려면 기본값은 false 입니다.

어떻게 사용하는지 보자

2. 응용 프로그램의 모든 페이지 구성 요소에서 사용합니다.

이 예에서는 간단한 시나리오와 복잡한 시나리오의 두 가지 시나리오를 볼 수 있습니다.

간단한 것을 봅시다.

// AppSimple.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import useDocumentTitle from './useDocumentTitle'

function Page(props) {
  return <h2>{props.content}</h2>
}

function Home() {
  useDocumentTitle('Home title 👻')
  return <Page content='This is Home! ' />
}

function About() {
  useDocumentTitle('About title 👽')
  return <Page content='About!' />
}

function Other() {
  useDocumentTitle('Other title 👾')
  return <Page content='And this is Other!' />
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About</Link>
          </li>
          <li>
            <Link to='/other'>Other</Link>
          </li>
        </ul>

        <hr />

        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/other' component={Other} />
      </div>
    </Router>
  )
}

export default App

보시다시피 모든 구성 요소는 useDocumentTitle 후크를 사용합니다. 이것은 제목 변경을 관리하는 가장 간단한 방법입니다.

여기에 몇 가지 참고 사항:

react-router를 사용하여 앱의 여러 페이지를 처리합니다.

모든 페이지 구성 요소에는 useDocumentTitle 실행이 있습니다.

구성 요소가 마운트될 때마다 제목이 변경됩니다.

라이브 예제를 볼 수 있습니다 here

더 잘 보려면 옵션Open In New Window을 선택하여 제목 변경 사항을 확인하십시오.

조금 더 복잡한 것을 사용하는 두 번째 접근 방식을 살펴보십시오.

// AppSimple.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import useDocumentTitle from './useDocumentTitle'

function Page(props) {
  const titlePrefix = 'AppName 🤠 | '
  useDocumentTitle(`${titlePrefix}${props.title}`)
  return <h2>{props.content}</h2>
}

function Home() {
  return <Page content='This is Home!' title='Home Title 👻' />
}

function About() {
  return <Page content='About!' title='About title 👽' />
}

function Other() {
  return <Page content='And this is Other!' title='Other title 👾' />
}

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About</Link>
          </li>
          <li>
            <Link to='/other'>Other</Link>
          </li>
        </ul>

        <hr />

        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/other' component={Other} />
      </div>
    </Router>
  )
}

export default App

보시다시피 Page라는 하나의 구성 요소만 후크를 호출합니다. 이런 식으로 모든 제목을 각 페이지에 prop로 보내고 Page 구성 요소에서 이를 사용하여 변경합니다.

여기에 몇 가지 참고 사항:

간단한 예제와 비교하여 react-router와 동일한 구조를 사용하여 앱의 여러 페이지를 처리합니다.

실행하기 위해 중앙 집중화된 구성 요소가 하나 있습니다useDocumentTitle.

이 Page 구성 요소에는 titlePrefix라는 새로운 기능이 있습니다. 이 값은 모든 제목 변경에서 접두사(제목 앞의 텍스트)를 설정할 수 있음을 확인하기 위한 것입니다.

이것은 절대적으로 선택 사항이지만 이해하고 가지고 노는 것이 좋습니다.

라이브 예제를 볼 수 있습니다 here

더 잘 보려면 옵션Open In New Window을 선택하여 제목 변경 사항을 확인하십시오.

그리고 그게 다야. 읽어주셔서 감사합니다. 행복한 코딩을 하세요!

레포 here

라이브 예시 here