특수 구성요소

이 가이드에서는 사용자가 PWA Kit 스토어프런트에서 라우팅이 작동하는 방식을 잘 알고 있다고 가정합니다. 자세한 내용은 라우팅 가이드를 참조하십시오.

PWA Kit React SDK에는 AppConfig, App, Error, Document 등의 특수 구성요소가 포함되어 있습니다.

여러 페이지에 걸쳐 스토어프런트 동작을 구성하고 맞춤화할 수 있도록 각 특수 구성요소의 기본 구현을 맞춤형 버전으로 재정의할 수 있습니다.

각 특수 구성요소를 하나씩 살펴보겠습니다.

AppConfig 구성요소는 React 앱의 구성 요소 계층 최상위에 위치합니다. 이 위치에서 상태 관리 또는 구성요소 테마와 같은 앱 전체 기능을 구성하고 지원하는 코드를 삽입할 수 있습니다. Retail React App에서는 AppConfig에 ChakraProvider 구성요소를 삽입하여 테마 값(색상, 간격 등)을 모든 Chakra UI 구성요소에 사용할 수 있도록 합니다.

또한 AppConfig 구성요소를 사용하면 getProps 함수를 통해 routeComponent에 의해 향상된 모든 구성요소로 전달되는 인수 집합을 확장할 수 있습니다. 이러한 인수를 추가하려면 AppConfig 구성요소의 속성으로 extraGetPropsArgs라는 함수를 정의합니다.

Retail React App은 extraGetPropsArgs 함수를 사용하여 Salesforce Commerce API와 상호 작용하기 위해 routeComponent에 의해 향상된 모든 구성요소에 오브젝트에 대한 액세스 권한을 부여합니다.

PWA Kit React SDK의 AppConfig 구성요소 버전은 사용자가 재정의하지 않는 한 별다른 역할을 하지 않습니다. AppConfig의 SDK 버전을 재정의하려면 app/components/_app-config/index.jsx에서 파일을 정의합니다. 새로 생성된 PWA Kit 프로젝트에 이미 이 파일이 포함되어 있습니다.

App 구성요소는 AppConfig 구성요소의 하위 구성요소입니다. 이 구성요소의 주 용도는 머리글, 바닥글 및 사이드바와 같이 React 앱 전체에서 유지되는 레이아웃 및 UI 구성요소를 포함하는 것입니다.

App 구성요소도 routeComponent 함수로 향상됩니다. getProps 함수를 App 구성요소의 속성으로 정의할 경우 routes 배열의 어떤 구성요소든 렌더링되면 이 함수가 호출됩니다. 모든 페이지에서 실행할 로직에 사용하십시오.

AppConfig와 마찬가지로 PWA Kit React SDK에 App 구성요소의 기본 버전이 존재하므로 이를 재정의하는 것이 좋습니다. App의 SDK 버전을 재정의하려면 app/components/_app/index.jsx에서 파일을 정의합니다. 새로 생성된 PWA Kit 프로젝트에 이미 이 파일이 포함되어 사용을 시작할 수 있습니다.

새로 생성된 프로젝트에 대해 App에서 구현되는 기능으로는 분석 추적, 오프라인 탐지 및 접근성을 위한 SkipNavLink 구성요소가 있습니다.

Error 구성요소는 다음 조건 중 하나라도 해당할 때 App 구성요소 대신 렌더링됩니다.

  • 사용자가 routes 배열에 없는 경로를 요청합니다.
  • routes 배열의 구성요소가 getProps 함수에서 오류를 유발합니다.
  • routes 배열의 구성요소가 렌더링 시에 오류를 유발합니다.

Error 구성요소가 반환되면 HTTP 404 상태도 응답 헤더에 포함됩니다.

다른 특수 구성요소와 마찬가지로, PWA Kit React SDK에 Error 구성요소의 기본 버전도 포함되어 있으므로 재정의하는 것이 좋습니다. Error의 SDK 버전을 재정의하려면 app/components/_error/index.jsx에서 파일을 정의합니다. 새로 생성된 PWA Kit 프로젝트에 이미 이 파일이 포함되어 사용을 시작할 수 있습니다.

Error 구성요소를 재정의하면 해당 브랜드의 오류 페이지를 맞춤화하고, 리디렉션을 추가하고, 오류를 분석 이벤트로 추적할 수 있습니다.

Document 구성요소는 <html>, <head> 및 <body> 태그와 같은 애플리케이션 관련 HTML을 정의합니다.

다른 특수 구성요소와 마찬가지로, PWA Kit React SDK에는 Document 구성요소의 기본 버전도 포함되어 있으며 재정의할 수 있습니다. 그러나 이 경우에는 재정의하지 않는 것이 좋습니다. 하지만 애플리케이션에 대한 세부적인 제어가 필요한 경우 app/components/_document/index.jsx에서 파일을 정의하여 Document를 재정의할 수 있습니다. 새로 생성된 PWA Kit 프로젝트에는 이 파일이 포함되지 않습니다.

Document 구성요소를 재정의하는 대신, React Helmet 라이브러리를 사용하여 Document의 HTML 태그(예: <head>)를 수정하는 것이 좋습니다.