양식 작성(3): 입력 구성 요소 통합

매일 우리는 문자열, 숫자 및 부울과 같은 다양한 유형을 처리하기 위해 다양한 입력 요소를 작성합니다.

그런 다음 하나의 구성 요소로 결합하여 양식 구성 요소라고 합니다.

다양성이 있는 곳에 복잡성이 있습니다.

이 부분은 복잡성이 외부가 아닌 입력 구성 요소에 배치되어야 한다고 설명합니다.

지저분한 입력

3개의 입력 요소가 있는 양식 구성 요소가 있다고 가정합니다.

function MySimpleFormComponent() {
  const refValueList = useRef<any[]>(["", "1", true]);
  const handleChange = (index: number, e: ChangeEvent<HTMLInputElement>) => {
    const updateValueList = (index: number, value: any) => {
      refValueList.current[index] = value;
    };
    updateValueList(index, e.target.type === "checkbox" ? e.target.checked : e.target.value);
  };
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    console.log("Let's Submit: ", refValueList.current);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={(e) => handleChange(0, e)} defaultValue={"default"} />
      <input type="number" onChange={(e) => handleChange(1, e)} defaultValue={"1"} />
      <input type="checkbox" onChange={(e) => handleChange(2, e)} defaultChecked={true} />
      <button type="submit">Submit</button>
    </form>
  );
}

<input>를 사용하면 기분이 나빠지는 문제가 직접 발생합니다.

NOT 통합 유형: defaultValue 및 defaultChecked

NOT 통합 처리기: e.target.checked 및 e.target.value

제한된 기능 및 검증

복잡한 JSX 구조

통합 구성 요소

깨끗하고 깔끔한 입력 구성 요소가 간절히 필요합니다.

function TextInputComponent({ defaultValue, onChange }: { defaultValue: string; onChange: (value: string) => void }) {
  //custom implementation
  const [value, setValue] = useState(defaultValue);
  useEffect(() => {
    onChange(value);
  }, [value]);
  return <div>Your Custom TextInputComponent: {defaultValue}</div>;
}
function NumberInputComponent({ defaultValue, onChange }: { defaultValue: number; onChange: (value: number) => void }) {
  //custom implementation
  // ...
  return <div>Your Custom NumberInputComponent: {defaultValue}</div>;
}
function CheckboxInputComponent({ defaultValue, onChange }: { defaultValue: boolean; onChange: (value: boolean) => void }) {
  //custom implementation
  // ...
  return <div>Your Custom CheckboxInputComponent: {defaultValue}</div>;
}

각 InputComponent에는 고유한 상태, 스타일, 논리 등이 있습니다.

공통으로 props input와 onChange를 가지고 있기 때문에 통일된 defaultValue 요소로 취급하면서도 다양한 유틸리티로 구현할 수 있다.

더 나은 방법

더 나은 형식을 작성해 보겠습니다.

function MyBetterFormComponent() {
  const refValueList = useRef<any[]>(["", 1, true]);
  const handleChange = (index: number, value: any) => {
    const updateValueList = (index: number, value: any) => {
      refValueList.current[index] = value;
    };
    updateValueList(index, value);
  };
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    console.log("Let's Submit: ", refValueList.current);
  };
  return (
    <form onSubmit={handleSubmit}>
      <TextInputComponent onChange={(v) => handleChange(0, v)} defaultValue={"default"} />
      <NumberInputComponent onChange={(v) => handleChange(1, v)} defaultValue={1} />
      <CheckboxInputComponent onChange={(v) => handleChange(2, v)} defaultValue={true} />
      <button type="submit">Submit</button>
    </form>
  );
}

Remember: consume <InputComponent>s as if they are <input>s.

다음 부분에서는 <InputComponent> 내에서 유용한 유효성 검사기를 사용자 정의하는 방법에 대해 설명합니다.