사용자 지정 React 라이브러리를 사용하여 Headless 양식 렌더링

사용자 지정 구성 요소를 만들고 구현하여 조직의 요구 사항과 지침에 따라 Headless 적응형 양식의 모양과 기능(비헤이비어)을 사용자 지정할 수 있습니다.

이러한 구성 요소는 두 가지 주요 용도, 즉 양식 필드의 모양이나 스타일을 제어하고 이러한 필드를 통해 수집된 데이터를 양식 모델 인스턴스 내에 저장하는 역할을 합니다. 이 내용이 혼란스럽게 들릴 경우 걱정하지 마십시오. 잠시 후 자세한 내용을 살펴보겠습니다. 지금은 사용자 지정 구성 요소를 만들고, 이러한 구성 요소를 사용하여 양식을 렌더링하고, 이벤트를 사용하여 REST 끝점에 데이터를 저장하고 제출하는 초기 단계에 초점을 맞추겠습니다.

이 자습서에서는 Google Material UI 구성 요소를 사용하여 사용자 지정 React 구성 요소를 사용하여 Headless 적응형 양식을 렌더링하는 방법을 보여 줍니다. 그러나 이 라이브러리에 제한되지 않으며 모든 React 구성 요소 라이브러리를 자유롭게 활용하거나 사용자 정의 구성 요소를 개발할 수 있습니다.

이 문서를 완료하면 스타터 키트를 사용하여 Headless 양식을 만들고 게시하는 과정에서 만든 문의하기 양식이 다음과 같이 변형됩니다.

Google Material UI 구성 요소를 사용하여 양식을 렌더링하는 것과 관련된 주요 단계는 다음과 같습니다.

1. Google Material UI 설치

기본적으로 시작 키트는 Adobe의 스펙트럼 구성 요소를 사용합니다. Google의 재질 UI를 사용하도록 설정해 보겠습니다.

    npm install @mui/material @emotion/react @emotion/styled --force

Google Material UI npm 라이브러리를 설치하고 시작 키트 종속성에 라이브러리를 추가합니다. 이제 Material UI 구성 요소를 사용하여 양식 구성 요소를 렌더링할 수 있습니다.

2. 사용자 지정 React 구성 요소 만들기

기본 텍스트 입력 구성 요소를 Google 재질 UI 텍스트 필드 구성 요소로 바꾸는 사용자 지정 구성 요소를 만들어 보겠습니다.

Headless 양식 정의에 사용되는 각 구성 요소 유형(fieldType 또는 :type)에 대해 별도의 구성 요소가 필요합니다. 예를 들어 이전 섹션에서 만든 연락처 양식에서는 text-input 유형의 이름, 전자 메일 및 전화 필드(fieldType: "text-input")와 메시지 필드의 유형이 multiline-input("fieldType": "multiline-input")입니다.

fieldType: "text-input" 속성을 사용하는 모든 양식 필드에 재질 UI 텍스트 필드 구성 요소를 오버레이하는 사용자 지정 구성 요소를 만들어 보겠습니다.

사용자 지정 구성 요소를 만들고 사용자 지정 구성 요소를 fieldType 속성과 매핑하려면 다음을 수행하십시오.

     import React from 'react';
     import {useRuleEngine} from '@aemforms/af-react-renderer';
     import {FieldJson, State} from '@aemforms/af-core';
     import { TextField } from '@mui/material';
     import Box from '@mui/material/Box';
     import { richTextString } from '@aemforms/af-react-components';
     import Typography from '@mui/material/Typography';


     const MaterialtextField = function (props: State<FieldJson>) {

         const [state, handlers] = useRuleEngine(props);

         return(

         <Box>
             <Typography component="legend">{state.visible ? richTextString(state?.label?.value): ""} </Typography>
             <TextField variant="filled"/>
         </Box>

         )
     }

     export default MaterialtextField;

state.visible 파트는 구성 요소가 표시되도록 설정되어 있는지 확인합니다. 이 경우 필드의 레이블을 검색하고 richTextString(state?.label?.value)을(를) 사용하여 표시합니다.

사용자 지정 구성 요소 materialtextfield이(가) 준비되었습니다. 이 사용자 지정 구성 요소를 설정하여 fieldType: "text-input"의 모든 인스턴스를 Google Material UI 텍스트 필드로 바꾸겠습니다.

3. Headless 양식 필드에 사용자 지정 구성 요소 매핑

서드파티 라이브러리 구성 요소를 사용하여 양식 필드를 렌더링하는 프로세스를 매핑이라고 합니다. 각(fieldType)을 타사 라이브러리의 해당 구성 요소에 매핑합니다.

모든 매핑 관련 정보가 mappings.ts 파일에 추가됩니다. mappings.ts 파일의 ...mappings 문은 Adobe 스펙트럼 구성 요소로 (fieldType 또는 :type)을 오버레이하는 기본 매핑을 참조합니다.

마지막 단계에서 만든 materialtextfield 구성 요소에 대한 매핑을 추가하려면:

다음 단계

Google Material UI를 사용하는 사용자 지정 구성 요소로 양식을 성공적으로 렌더링했습니다. 제출 단추(해당 Google Material UI 구성 요소와 매핑됨)를 클릭하여 양식을 제출해 보셨나요? 만약 그렇지 않다면, 가서 시도해 보세요.

양식이 데이터를 데이터 소스에 제출합니까? 안 돼? 걱정하지 마십시오. 런타임 라이브러리와 통신하도록 양식이 구성되지 않았기 때문입니다.

양식과 통신할 수 있도록 양식을 구성하려면 어떻게 해야 합니까? 모든 것을 자세히 설명하는 기사가 곧 나옵니다. 기다려 주십시오.