Gatsby의 wrapPageElement를 사용하여 여러 경로에서 지속적인 UI 유지

Gatsby의 문서 깊숙이 자리잡은 몇 가지 매우 유용한 API 기능이 있습니다: wrapPageElement 및 그 큰 형 wrapRootElement .

이러한 API는 Gatsby의 정적 페이지 생성 위에 더 풍부하고 복잡한 UI를 개발할 수 있는 기회를 제공합니다.

이러한 함수를 내보냄으로써 우리는 Gatsby가 앱의 루트 수준과 페이지 수준에서 더 깊은 중첩 모두에서 페이지 주위에 추가 구성 요소를 래핑하는 방법을 알릴 수 있습니다.



이는 아래 기능 중 일부에 필수적인 경로를 통해 구성 요소를 유지할 때 사용됩니다.

미디어 플레이어/컨트롤

탐색 요소

사이드바 및 메뉴

앱 수준 컨텍스트 제공자(예: Redux )

In a rush? Check out the quick implementation.

지속한다는 것은 무엇을 의미합니까?

Gatsby의 기본 동작은 경로를 변경할 때마다 페이지의 모든 요소를 ​​다시 렌더링하는 것입니다.

위에서 설명한 것처럼 활성 상태를 유지하고 여러 경로에 마운트하거나 지속하려면 구성 요소가 필요할 수 있습니다.

이 문서에서는 wrapPageElement를 사용하여 레이아웃 구성 요소를 여러 경로에서 지속되도록 하는 데 중점을 둘 것입니다. 이를 수행하는 방법에는 여러 가지가 있지만 가장 우아하다고 생각되는 방법을 보여 드리겠습니다.

레이아웃 구성 요소 할당

내가 레이아웃 구성 요소라고 부르는 것은 페이지를 감싸는 모든 구성 요소가 될 수 있습니다. 정말 기본적인 예에는 페이지 콘텐츠를 끼우는 머리글과 바닥글이 포함될 수 있습니다.

// components/Layout.js

export const Layout = ({ children }) => (
  <>
    <h1>My awesome site!</h1>
    {children}
    <footer>Built with Gatsby.</footer>
  </>
)

이러한 레이아웃의 한계는 무궁무진합니다. 페이지 전체에서 유지하려는 모든 항목을 하나로 고정할 수 있습니다. 유일한 요구 사항은 래핑된 페이지가 표시되도록 렌더링{children}하는 것입니다.

레이아웃 구성 요소를 특정 페이지 구성 요소에 연결하는 방법을 만들어서 Gatsby에게 올바르게 래핑하는 방법을 알려줄 수 있어야 합니다.

이것은 매우 쉽습니다. 정적Layout 속성을 페이지 구성 요소에 할당하기만 하면 됩니다.

// pages/index.js

import Layout from "../components/layout"

const IndexPage = () => {
  return ...
}

IndexPage.Layout = Layout
export default IndexPage

알림Layout은 우리가 React 구성 요소로 작업하고 있음을 나타내는 규칙으로 대문자입니다.

이것이 페이지에 필요한 전부이며 이제 Gatsby 구성에 적용됩니다.

Gatsby 파일 설정

이제 할당된 Layout 구성 요소로 선택한 페이지를 래핑하도록 Gatsby에 알려야 합니다.
gatsby-browser.js 및 gatsby-ssr.js 내에서 wrapPageElement를 내보낼 수 있습니다. Gatsby가 각 페이지에 대해 이 함수를 호출할 때 두 개의 인수를 전달합니다. 요소와 일부 소품.

// gatsby-browser.js && gatsby-ssr.js

export function wrapPageElement({ element, props }) {
  const Layout = element.type.Layout ?? React.Fragment
  return <Layout {...props}>{element}</Layout>
}

요소는 단순히 Gatsby가 렌더링하려는 페이지 구성 요소이고 props는 해당 페이지의 props입니다. 이러한 소품에는 작성된 모든 GraphQL 쿼리를 포함하여 모든 종류의 유용한 데이터가 포함됩니다. ( Check out more here )

페이지 구성 요소에 레이아웃 속성이 있는지 확인하는 nullish coalescing operator (??)을 사용하여 Layout 변수를 할당합니다. 그렇지 않은 경우 React fragment을 반환합니다.

자체 props를 통해 레이아웃 내의 모든 쿼리에 액세스할 수 있도록 페이지의 props를 Layout에 분산시키는 것이 중요합니다.

거의 모든 경우 구성 요소가 올바르게 hydrated 될 수 있도록 gatsby-ssr 및 gatsby-browser 구성 파일을 동일하게 유지해야 합니다.

결과

그게 다야! 동일한Layout을 여러 페이지에 할당하고 페이지 사이를 탐색하면 Gatsby는 페이지가 다시 렌더링되지 않도록 합니다. 이렇게 하면 경로 전체에서 해당 레이아웃 내의 모든 상태가 그대로 유지됩니다.

경로가 변경될 때 카운터 구성 요소가 어떻게 계속 계산되는지 보여주는 최소한의 예제가 포함된 저장소를 함께 만들었습니다. 더 깊이 파고 싶다면 확인하십시오.

https://github.com/miles-crighton/gatsby-persistent-ui

이 방법의 장점은 완전히 옵트인하면서 원하는 레이아웃 수만큼 확장된다는 것입니다.



페이지에 레이아웃을 원하지 않는 경우 Layout 속성을 설정하지 마십시오. 간단합니다!