SPA의 구성 요소 합성 composite-components-in-spas

복합 구성 요소는 여러 기본 구성 요소를 단일 구성 요소로 결합하여 AEM 구성 요소의 모듈식 특성을 사용합니다. 일반적인 복합 구성 요소 사용 사례는 이미지 및 텍스트 구성 요소의 조합으로 구성된 카드 구성 요소입니다.

복합 구성 요소가 AEM SPA(단일 페이지 애플리케이션) 편집기 프레임워크 내에서 올바르게 구현되면 콘텐츠 작성자는 다른 구성 요소와 마찬가지로 이러한 구성 요소를 드래그 앤 드롭할 수 있지만 복합 구성 요소를 구성하는 각 구성 요소를 개별적으로 편집할 수 있습니다.

이 문서에서는 단일 페이지 애플리케이션에 합성 구성 요소를 추가하여 AEM SPA 편집기와 원활하게 작동하는 방법을 보여 줍니다.

사용 사례 use-case

이 문서에서는 일반적인 카드 구성 요소를 사용 사례로 사용합니다. 카드는 많은 디지털 경험에 대한 공통 UI 요소이며 일반적으로 이미지와 관련 텍스트 또는 캡션으로 구성됩니다. 작성자는 전체 카드를 드래그 앤 드롭할 수 있지만 카드의 이미지를 개별적으로 편집하고 관련 텍스트를 사용자 지정할 수 있기를 원합니다.

사전 요구 사항 prerequisites

복합 구성 요소 사용 사례를 지원하기 위한 다음 모델에는 다음과 같은 사전 요구 사항이 필요합니다.

SPA에 복합 구성 요소 추가 adding-composite-components

AEM 내의 SPA 구현에 따라 복합 구성 요소를 구현하기 위한 세 가지 모델이 있습니다.

다음 섹션에서는 카드 구성 요소를 예로 사용하여 각 사례를 구현하는 예를 제공합니다.

구성 요소가 AEM 프로젝트에 없습니다. component-does-not-exist

먼저 합성 구성 요소를 구성할 구성 요소, 즉 이미지와 해당 텍스트에 대한 구성 요소를 만듭니다.

텍스트 구성 요소는 다음과 유사합니다.

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

유사한 방법으로 이미지 구성 요소를 만든 경우 이미지 및 텍스트 구성 요소를 하위 구성 요소로 사용하여 AEMText 구성 요소와 결합하여 새 카드 구성 요소로 만들 수 있습니다.

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

이렇게 만들어진 합성 구성 요소는 이제 앱의 어느 위치에나 배치할 수 있으며 SPA 편집기에서 텍스트 및 이미지 구성 요소에 대한 자리 표시자를 추가합니다. 아래 샘플에서 카드 구성 요소는 제목 아래의 홈 구성 요소에 추가됩니다.

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

편집기에 텍스트 및 이미지에 대한 빈 자리 표시자가 표시됩니다. 편집기를 사용하여 이러한 값에 대한 값을 입력할 때 지정된 페이지 경로, 즉 루트 수준에서 itemPath에 지정된 이름으로 /content/wknd-spa/home에 저장됩니다.

구성 요소는 AEM 프로젝트에 존재하지만 필수 콘텐츠는 존재하지 않습니다. content-does-not-exist

이 경우 카드 구성 요소는 제목 및 이미지 노드가 포함된 AEM 프로젝트에 이미 생성되었습니다. 하위 노드(텍스트 및 이미지)에는 해당 리소스 유형이 있습니다.

카드 구성 요소의

그런 다음 SPA에 추가하고 콘텐츠를 검색할 수 있습니다.

이제 imagecard 구성 요소를 AEM 편집기의 컨테이너에 바로 추가할 수 있습니다.

구성 요소와 필수 콘텐츠는 모두 AEM 프로젝트에 있습니다. both-exist

콘텐츠가 AEM에 있는 경우 콘텐츠에 대한 경로를 제공하여 SPA에 직접 포함될 수 있습니다.

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

AEMCard 구성 요소는 이전 사용 사례에서 정의된 과(와) 동일합니다. AEM 프로젝트의 위 위치에 정의된 콘텐츠가 SPA에 포함되어 있습니다.