React, 빵 부스러기 목록 및 ContextAPI

이 보도는 React Advent Calendar 2019 9일째 보도입니다.
Context API로 빵 부스러기 목록을 설치한 후 사용 방법을 배웠기 때문에 설치 방법을 정리했습니다.
Next.js에서 시범을 실시했기 때문에 다른 환경에서 사용하면 조금만 바꿔야 하지만 기본적인 부분은 변경하지 않고 재활용할 수 있다.
t-yng/react-breadcrumb-example
프레젠테이션
카탈로그

빵 부스러기 목록 구성 요소 만들기

컨텐트 만들기

구성자 만들기

Hooks 함수 만들기

사용 방법

빵 부스러기 목록 구성 요소 만들기

어셈블리의 드로잉 이미지
reduce()에서 전달된 빵 부스러기 목록의 원소 목록과 분리기>를 결합시킨다.Link 어셈블리는 Next입니다.js에 의존하기 때문에 자신의 환경에서 적당히 여기를 바꾸세요.

import React, { FC } from 'react';
import Link from 'next/link';

export interface BreadcrumbItem {
    id: number;
    text: string;
    href?: string;
}

interface BreadcrumbProps {
    items: BreadcrumbItem[];
    separator?: string;
}

const Breadcrumb: FC<BreadcrumbProps> = ({ items, separator = '>' }) => {
    return (
        <>
            {
                items
                .map(item =>
                    item.href != null
                        // next/link を利用しているので、環境に合わせて書き換えが必要
                        ? <Link href={item.href}>{item.text}</Link>
                        : <span>{item.text}</span>
                )
                .reduce((prev, curr) => prev.length === 0 ? [curr] : [...prev, ` ${separator} `, curr], [])
            }
        </>
    )
}

export default Breadcrumb;

컨텐트 만들기

빵 부스러기 목록 목록 목록을 설정하기 위해 정의된 setBreadcrumbItems() 을 만듭니다.
여기에는 인터페이스만 정의되어 있으며, 내용의 설치는 아래BreadcrumbContext에서 진행될 것이다.

import React from 'react';
import { BreadcrumbItem } from './Breadcrumb';

interface BreadcrumbContext {
    setBreadcrumbItems: (items: BreadcrumbItem[]) => void;
}

export const BreadcrumbContext = React.createContext({} as BreadcrumbContext);

구성자 만들기

위에 생성된 구성 요소와 Context를 조합하여 빵 부스러기 목록을 볼 수 있는 기능을 제공합니다.
데이터 흐름

서브어셈블리BreadcrumbProvider를 전달BreadcrumbContext에서 빵 부스러기 목록을 지정하고 호출하는 일람

여기에 정의된 setBredcrumbItems(), 업데이트 setBreadcrumbItems() 목록

items 업데이트된 Breadcrumb를 구성 요소에 전달하여 빵 부스러기 목록을 그립니다

하계.
페이지 전환에 그림이 남지 않도록 페이지 전환 이벤트에 따라 목록을 초기화하고 있습니다.items, 환경에 따라 다시 작성하십시오.

import React, { useState, FC, HTMLAttributes, useEffect } from 'react';
import { useRouter } from 'next/router';
import { BreadcrumbContext } from './BreadcrumbContext';
import Breadcrumb, { BreadcrumbItem } from './Breadcrumb';

export const BreadcrumbProvider: FC<HTMLAttributes<HTMLElement>> = ({
    children,
}) => {
    const router = useRouter();
    const [items, setItems] = useState([] as BreadcrumbItem[]);

    // ページ遷移をした時にパンくずリストを初期化する
    useEffect(() => {
        // next/router を利用しているので、環境に合わせて書き換えが必要
        router.events.on('routeChangeComplete', () => setItems([]));
    }, []);

    const setBreadcrumbItems = (_items: BreadcrumbItem[]) => {
        // コンポーネントの再帰的な描画を防ぐために空の時だけセットする
        if (items.length === 0) {
            setItems(_items);
        }
    };

    return (
        <>
            <BreadcrumbContext.Provider value={{ setBreadcrumbItems }}>
                {<Breadcrumb items={items} />}
                {children}
            </BreadcrumbContext.Provider>
        </>
    );
};

Hooks 함수 만들기

문서 레지스트리에 항목을 추가합니다.
서브어셈블리는 직접 참조next/router가 아니라 이 함수를 통해 Context를 사용합니다.
직접 호출useContext()도 문제없지만 이용자는 안에 설치된 것을 의식해야 하기 때문에 기분이 좋지 않다. 컨텍스트를 얻은 후 어떤 처리를 추가하고 싶을 때 처리하기 쉬우니 번거롭게 포장하지 않는 것을 추천한다.

import { useContext } from 'react';
import { BreadcrumbContext } from './BreadcrumbContext';
import { BreadcrumbItem } from './Breadcrumb';

export const useBreadcrumb = (items: BreadcrumbItem[]) => {
    const context = useContext(BreadcrumbContext);
    context.setBreadcrumbItems(items);
};

사용 방법

루트 어셈블리

export const RootComponent = ({children}) => (
    <BreadcrumbProvider>
        {children}
    </BreadcrumbProvider>
)

후대 구성 요소

export const ChildComponent = {
    useBreadcrumb([
        {
            id: 1,
            text: 'Home',
            href: '/'
        },
        {
            id: 2,
            text: 'About',
        }
    ]);

    return <h1>This is About Page</h1>
}

참고 자료

schiehll/react-alert