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

이 게시물에서는 웹 앱에 동적 제목 동작을 추가하는 간단한 구성 요소를 만드는 방법을 보여 드리겠습니다.

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

이력서

react-helmet 종속성을 추가합니다.

제목에 대한 동적 구성 요소를 작성합니다.

라우터 또는 페이지에 동적 구성 요소를 추가합니다.

react-helmet 종속성을 추가합니다.

사용하는 경우yarn

$ yarn add react-helmet

사용하는 경우npm

$ npm i react-helmet

제목에 대한 동적 구성 요소를 작성합니다.

다음과 같이 이 예제에 대한 독립 구성 요소를 작성할 수 있습니다.

// TitleComponent.jsx

import React from 'react';
import Helmet from 'react-helmet';

const TitleComponent = ({ title }) => {
    var defaultTitle = '⚛️ app';
    return (
        <Helmet>
            <title>{title ? title : defaultTitle}</title>
        </Helmet>
    );
};

export { TitleComponent };

이 예제에서는 제목을 수신할 수 있는 독립 구성 요소를 작성했으며 제목으로 prop를 보내지 않으면 제목이 기본 제목이 됩니다.

경로에 동적 구성 요소를 추가합니다.

이 구성 요소를 앱에 추가하는 방법은 여러 가지가 있으며 대부분 라우팅 결정에 따라 다릅니다(Gatsby 또는 Next.js를 사용하는 경우 라우터 구성을 생략할 수 있지만 create-react-app 또는 반응 보일러 템플릿을 라우터에 추가할 수 있습니다.

경로에 이 구성 요소 추가(라우터 사용):

// routes.js

import React from 'react';
import { Route } from 'react-router';
import { TitleComponent } from './TitleComponent.jsx';

// withTitle function
const withTitle = ({ component: Component, title }) => {
    return class Title extends Component {
        render() {
            return (
                <React.Fragment>
                    <TitleComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

// Example pages 
const Index = () => <h1>This is the IndexComponent!</h1>;
const Persons = () => <h1>This is the PersonsComponent!</h1>;
const Dogs = () => <h1>This is the DogsComponent!</h1>;
const Food = () => <h1>This is the FoodComponent!</h1>;

// Adding title
const IndexComponent = withTitle({ component: Index, title: 'Index' });
const PersonsComponent = withTitle({ component: Persons, title: '🧠 Persons' });
const DogsComponent = withTitle({ component: Dogs, title: '🐶 Dogs' });
const FoodComponent = withTitle({ component: Food, title: '🌮 Food' });

// Your router
export default (
    <Route>
        <Route path="/" component={IndexComponent} />
        <Route path="/persons" component={PersonsComponent} />
        <Route path="/dogs" component={DogsComponent} />
        <Route path="/food" component={FoodComponent} />
    </Route>
);

페이지에 이 구성 요소 추가(Next.js, Gatsby, After.js 사용):

withTitle 기능 사용:

// pages/pageOne.jsx

import React from 'react';
import { TitleComponent } from './TitleComponent.jsx';

// withTitle function
const withTitle = ({ component: Component, title }) => {
    return class Title extends Component {
        render() {
            return (
                <React.Fragment>
                    <TitleComponent title={title} />
                    <Component {...this.props} />
                </React.Fragment>
            );
        }
    };
};

const PageOne = () => (
    <React.Fragment>
        <h1> Page 1 </h1>
        // Some content...
    </React.Fragment>
);

export default withTitle({ component: PageOne, title: 'Page One!' });

페이지에 직접 <TitleComponent /> 추가:

// pages/pageOne.jsx

import React from 'react';
import { TitleComponent } from './TitleComponent.jsx';

const PageOne = () => (
    <React.Fragment>
        <TitleComponent title="Page One!" />
        <h1> Page 1 </h1>
        // Some content...
    </React.Fragment>
);

export default PageOne;

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

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