Custom Form

정적 서식은 form의 존재와 input 구조가 정적이며, 동적 서식은 form의 존재가 동적이지만 input 구조는 정적입니다. 마지막으로 알아볼 사용자 정의 서식은 동적 서식과는 반대로 form의 존재는 정적이지만 input 구조가 동적입니다. 사용자 정의 서식에 대한 일반적인 오해는 이렇습니다. '이름을 입력하면 전화번호 input이 생기고, 전화번호를 입력하면 인증 번호 input이 생기는' 개인 정보 form은 사용자 정의 서식이 아니라 정적 서식입니다.

다시 한 번 정적 서식의 정의를 살펴보면 "form의 존재와 input 구조가 정적"이라는 것입니다. 개인 정보 form은 그 존재가 정적이며, input이 동적으로 드러납니다. 그럼에도 불구하고 input의 구조는 늘 name gender phoneNumber phoneNumberValidateNumber 등으로 고정되어있기 때문에 사용자 정의 서식이 아니라 정적 서식이 되는 것입니다.

그렇다면 어떤 것이 사용자 정의 서식이 될 수 있을까요? 할 일 목록 form은 전형적인 사용자 정의 서식의 예시입니다. input 개수가 정해져있지 않고 사용자의 필요에 따라 늘어날 수도, 줄어들 수도 있기 때문입니다.

src/component/TodoForm.tsx

const TODO_LIST_FORM = new CreateForm({
  validateOn: ["submit", "change"],
  clearFormOn: ["submit", "routeChange"],
});

export default function TodoForm() {
  const [todo, setTodo] = useState<Array<{ name: string, todo: "date" | "text" }>>([{ name: "date", todo: "date" }]);

  return (
    <form onSubmit={TODO_LIST_FORM.handleSubmit((data) => {console.log(data)})}>
      {todo.map(({ name, todo }, i) => (
        <div key={i}>
          {name}
          <input {...TODO_LIST_FORM.register({ name, type: todo, validate: { required: true } })}/>
          {TODO_LIST_FORM.getErrors(name)}
        </div>
      ))}

      <button type="button" onClick={() => setTodo(prev => [...prev, { name: `할일 ${prev.length}`, todo: "text" }])}>Add todo</button>
      <button>submit</button>
    </form>
  )
}

사실 위의 예시 코드는 동작하지 않습니다. 정확히는 랜더링은 되지만, Add todo 버튼을 클릭하면 "Error: Rendered more hooks than during the previous render." 에러가 발생합니다. 이는 register 함수와 getErrors 함수 내부에 리액트 훅이 존재하기 때문입니다. 리액트에서는 컴포넌트 내부의 훅 갯수를 항상 동일하게 유지해주어야 합니다(훅을 조건부로 호출하지 말라는 훅의 규칙도 이를 위해 존재하는 것입니다). 그런데 input이 늘어나면 그만큼 register 함수와 getErrors 함수를 더 많이 호출하게 되므로 이전 렌더와 비교하여 더 많은 훅이 호출됩니다.

따라서 사용자 정의 서식을 작성할 때는 SicilianProvider와 useSicilianContext를 통해 관련 함수를 자식 컴포넌트에서 호출되도록 해야 문제가 생기지 않습니다.

src/component/TodoForm.tsx

const TODO_LIST_FORM = new CreateForm({
  validateOn: ["submit", "change"],
  clearFormOn: ["submit", "routeChange"],
});

export default function TodoForm() {
  const [todo, setTodo] = useState<Array<{ name: string, type: "date" | "text" }>>([{ name: "date", type: "date" }, { name: "할일 1", type: "text" }]);

  return (
    <form onSubmit={TODO_LIST_FORM.handleSubmit((data) => {console.log(data)})}>
      {todo.map(({ name, type }, i) => (
        <div key={i}>
          <SicilianProvider value={{ register: TODO_LIST_FORM.register, name, type, validate: { required: true }, getErrors: TODO_LIST_FORM.getErrors }}>
            <TodoInput />
          </SicilianProvider>
        </div>
      ))}

      <button type="button" onClick={() => setTodo(prev => [...prev, { name: `할일 ${prev.length}`, type: "text" }])}>Add TODO</button>
      <button>submit</button>
    </form>
  )
}

const TodoInput = () => {
  const { register, name, validate, type, getErrors } = useSicilianContext();

  return (
    <>
      {name}
      <input {...register({name, validate, type})}/>
      {getErrors(name)}
    </>
  )
}