튜토리얼: 세 가지 폼 패턴 이해하기

프론트엔드에서 form은 유저의 입력을 받아 처리하는 가장 기본적인 수단입니다. 그러나 단순히 입력값을 받는 것만으로는 충분하지 않습니다. 어떤 입력을 받아야 하는지, 입력값이 언제 어떻게 변할 수 있는지를 고민하는 것은 form 설계에서 매우 중요한 일입니다. 그렇기 때문에 form의 구조와 동작 방식을 체계적으로 분류할 필요가 있습니다.

sicilian은 이러한 문제의식에서 출발하여, 프론트엔드에서 작성되는 form을 세 가지 형태로 구분합니다. 각각은 static form, dynamic form, 그리고 custom form으로, form 자체가 정적인지 혹은 동적인지, 그리고 form을 구성하는 input이 정적인지 동적인지에 따라 구분됩니다. 아래 표는 이 세 가지 형태의 분류 기준을 요약한 것입니다.

각 형태의 form이 어떤 구조와 특징을 가지는지는 이후에 자세히 살펴보겠습니다. 우선, 프론트엔드에서 가장 일반적으로 사용되는 형태인 static form을 sicilian으로 구현해보며 form 관리의 기본 원리를 이해해보겠습니다.