Uncontrolled Component

비제어 컴포넌트 구성

J Design System을 구축하는 과정에서 가장 중요하게 생각한 과제는 '사용자 경험'이었습니다. UI 컴포넌트를 키보드 제어를 통해 조작할 수 있도록 구현하였으며, 이를 위해 비제어 컴포넌트 방식을 사용하여 React의 상태 관리 흐름에서 벗어나 DOM 요소와 직접 상호작용하는 방식으로 구현하였습니다.

support React Hook Form

React Hook Form은 인기가 많은 React Form 라이브러리입니다. J Design System을 사용하면 React Hook Form에서도 사용할 수 있도록 register ref Ojbect를 수용하기 위해 forwardRef로 감싸주어 React Hook Form과 연계될 수 있도록 사용자 경험을 고려하였습니다.

//Textarea.tsx
type ExtendedTextAreaProps = TextAreaProps & { Label?: typeof TextareaLabel };
export const Textarea = Object.assign(
  forwardRef<HTMLTextAreaElement, ExtendedTextAreaProps>((textAreaProps, ref) => {
    const { children, ...propsWithoutChildren } = textAreaProps;
    const textareaLabel = filterComponent(children, TextareaLabel, true);
    return (
      <TextareaProvider textareaProps={propsWithoutChildren}>
        <TextareaContainer children={textareaLabel} ref={ref} />
      </TextareaProvider>
    );
  }),
  {
    Label: TextareaLabel
  }
);

//TextareaContainer
export const TextareaContainer = forwardRef(
  (props: { children: React.ReactNode }, externalRef: ForwardedRef<any> | null) => {
    const { styleProps, textareaProps, textareaId } = useContext<ReturnContext>(TextareaContext);
    const { onChange, ...attributesWithoutOnChange } = textareaProps;
    const textareaStyle = createTextareaStyle(styleProps, TEXTAREA_PLACEHOLDER_COLOR);
    const wrapperStyle = createWrapperStyle(styleProps.width);
    const { textareaRef, handleChange } = useSmart(onChange, styleProps.resize);
    const { getLabelId } = useTextarea();
    const labelId = getLabelId(props.children);

    return (
      <div css={wrapperStyle}>
        {props.children}
        <textarea
          role="textbox"
          aria-multiline="true"
          id={textareaId}
          css={textareaStyle}
          ref={e => {
            if (typeof externalRef === 'function') {
              externalRef(e);
            }
            textareaRef.current = e;
          }}
          onChange={handleChange()}
          {...(textareaProps.placeholder && { 'aria-placeholder': textareaProps.placeholder })}
          {...(labelId && { 'aria-labelledby': labelId })}
          {...attributesWithoutOnChange}
        />
      </div>
    );
  }
);

위의 예시는 실제 작성된 Textarea 코드 이며, Input, Radio, Checkbox 등 Form에 필요한 요소들도 사용이 가능합니다.