양식 구성 요소 디자인 업그레이드 ⬆️

내 앱을 위한 디자인 시스템을 만들 때 처음에는 많은 요소 입력 요소에 대한 구성 요소가 있었습니다. <InputText /> , <TextArea /> 및 <InputEmail /> .

나중에 나는 레이블, 오류 메시지, 일부 설명 등과 매우 기본적인 것들과 함께 그것들이 종종 필요하다는 것을 알았습니다. 나는 이 그룹을 FormField라고 부르기로 결정하고 FormFieldText 및 FormFieldEmail와 같은 구성 요소를 구현하기 시작했습니다.

다음은 예입니다.

<FormFieldPassword
  className={styles.formFieldPassword}
  autoComplete="new-password"
  label="Set a password"
  below={<FieldHelp>At least 8 characters</FieldHelp>}
  errorMessage={fieldFeedback.password}
  onChange={handleChangePassword}
  value={password}
  withShowPasswordToggle={true}
  autoFocus={emailWasInUrl}
  fullWidth
/>

얼마 후 꽤 많은FormField… 구성 요소와 그 내부에 상당한 양의 중복 코드가 생겼습니다. 결국 중복 코드를 제거하기 위해 일반FormField 구성 요소를 만들고 FormField… 구성 요소 내부에서 사용했습니다. 이것을 composition이라고 하며 그런 경우에 흔히 사용됩니다.

그러나 이 접근 방식을 사용하더라도 때때로 새 구성 요소FormField…를 만들어야 했습니다. 이 단계를 건너뛰고 일반FormField 구성 요소를 직접 사용하는 것이 더 나은 방법이라고 생각했습니다. 일부 프레임워크(예: Chakra UI )가 유사한 접근 방식을 사용한다는 사실이 내 생각을 뒷받침했습니다.

새로운 접근 방식:

<FormField
  className={styles.formFieldPassword}
  label="Set a password"
  below={<FieldHelp>At least 8 characters</FieldHelp>}
  errorMessage={fieldFeedback.password}
>
  <InputPassword
    autoComplete="new-password"
    onChange={handleChangePassword}
    value={password}
    withShowPasswordToggle={true}
    autoFocus={emailWasInUrl}
    error={fieldFeedback.password?.length > 0}
    fullWidth
  />
</FormField>

내가 이것에 대해 좋아하는 것은 입력에 속하는 소품을 명확하게 볼 수 있다는 것입니다. 예를 들어 매우 편리한 className와 같은 입력 소품에 직접 액세스할 수도 있습니다. 그리고 입력 위 또는 아래에 콘텐츠를 추가할 수 있습니다.

하지만 아직 해결하지 못한 두 가지 문제도 발생합니다.

오류가 발생하면 입력에 다른 디자인(예: 빨간색 테두리)이 필요할 수 있습니다. 위의 예에서는 내 입력의 error 소품을 설정하여 수동으로 이 작업을 수행합니다.

FormField의 레이블은 레이블이 지정된 입력을 알아야 합니다. 이제 여러 자식이 있을 수 있으므로 정확히 어느 자식이 입력인지 알 수 없습니다. 현재 나는 그것이 첫 번째 자식이라고 가정하고 있지만 입력 전에 자식을 추가할 수 없습니다.

오류 문제에 대한 아이디어

이 문제를 해결하는 방법은 이미 두 가지 아이디어가 있습니다.

하나는 render props pattern을 사용하고 있습니다.

<FormField>
  {error => <Input error={error} … />}
</FormField>

저는 이 접근 방식의 유연성이 마음에 듭니다. 내가 싫어하는 것은 마크업/코드가 이 솔루션에서 얼마나 복잡해 보이는가 하는 것입니다.

다른 접근 방식은 내 입력 구성 요소 내에서 사용할 수 있는 Context 을 사용하여 이 문제를 해결하는 것입니다.

구현이 입력 내부에 있으므로 마크업이 매우 명확합니다.

<FormField>
  <Input />
</FormField>

레이블 문제에 대한 아이디어

이것은 까다로운 것입니다. 기본적으로 위의 두 가지 접근 방식 중 하나를 사용할 수 있습니다.

렌더링 소품 패턴을 사용하여 내부에 IDFormField를 생성한 다음 다음과 같이 사용할 수 있습니다.

<FormField>
  {(error, labelFor) => <Input error={error} id={labelFor} … />}
</FormField>

하지만 저는 마크업이 더 단순해 보이길 정말로 원합니다. 그리고 이것이 더 까다로워지는 곳입니다. 컨텍스트에서 생성된 ID를 제공하면 두 가지 사소한 문제가 발생합니다.

입력이 두 개인 경우 둘 다 동일한 ID를 갖게 됩니다. 이것은 큰 문제처럼 보이지 않지만 HTML 사양에서 허용되지 않으며 문제를 일으킬 수 있습니다.

어떤 이유로 입력에 id 가 할당된 경우 FormField는 이를 알지 못하며 레이블이 더 이상 입력에 할당되지 않습니다.

Chakra UI는 이러한 접근 방식을 취하는 것으로 보이며 실제로 이 두 가지 문제를 모두 해결하지 못했습니다. 내가 너무 생각하고 있을지도 몰라🤔

어떻게 생각해? 이러한 문제를 해결하는 방법을 알고 있습니까? 댓글 남겨주시면 기쁩니다.

더 나은 솔루션을 찾으면 이 게시물을 업데이트하겠습니다.