formData
formData 메서드는 폼 요소와 바인딩된 객체 데이터를 생성하여 폼 요소를 더 간단하고 효율적으로 처리할 수 있도록 합니다. 이 메서드는 대상 요소 내의 모든 폼 요소 값을 포함하는 객체를 생성하며, 이 객체는 폼 요소의 변경 사항을 실시간으로 반영합니다.
아래 예시에서는 formData 메서드를 사용하여 폼 요소와 바인딩된 객체 데이터를 생성하는 방법을 보여줍니다:
이 예시에서는 텍스트 입력 상자, 라디오 버튼 및 텍스트 영역이 포함된 폼을 만들고, formData 메서드를 사용하여 이러한 폼 요소의 값을 담은 data 객체라는 것을 생성했습니다. 또한 데이터의 변화를 감시하기 위해 watch 메서드를 사용하고, 데이터를 실시간으로 페이지에 표시합니다. 사용자가 폼 요소의 값을 수정하면 data 객체가 그에 따라 업데이트되어 데이터 처리가 매우 간단하고 효율적이 됩니다.
역방향 데이터 바인딩
생성된 객체 데이터는 역방향 바인딩 능력도 가지고 있어, 객체의 속성을 수정하면 관련된 폼 요소 값도 자동으로 업데이트됩니다. 이는 폼 데이터를 처리할 때 매우 유용하며, 손쉽게 양방향 데이터 바인딩을 구현할 수 있습니다.
다음 예제에서는 formData 메서드를 사용하여 생성된 객체 데이터와 역방향 데이터 바인딩 방법을 보여줍니다：
이 예제에서는 먼저 텍스트 입력 상자, 라디오 버튼 및 텍스트 영역을 포함한 양식을 생성한 후, formData 메서드를 사용하여 데이터 객체 data를 생성했습니다. 그런 다음 data 객체의 속성을 수정하여 역방향 데이터 바인딩을 구현했습니다. 즉, 객체 속성이 변경되면 양식 요소의 값이 자동으로 업데이트됩니다. 이러한 양방향 데이터 바인딩 기능은 양식 데이터와의 상호작용을 더욱 편리하게 만듭니다.
특정 양식 모니터링
기본적으로 formData() 메서드는 대상 요소 내의 모든 input, select, textarea 요소를 감시합니다. 하지만 특정 폼 요소만 감시하고 싶다면 CSS 선택자를 전달하여 구현할 수 있습니다.
다음 예시에서는 CSS 선택자를 전달하여 특정 폼 요소를 감지하는 방법을 보여줍니다:
이 예제에서는 class가 "use-it"인 폼 요소만 모니터링하고자 하므로, formData() 메서드에 ".use-it"을 인수로 전달했습니다. 이렇게 하면 해당 클래스 이름을 가진 폼 요소만 모니터링되고 생성된 데이터 객체에 포함됩니다. 이는 선택적으로 폼 요소를 모니터링하여 폼 데이터를 보다 정확하게 관리할 때 유용합니다.
사용자 정의 양식
사용자 정의 폼 구성 요소의 사용은 매우 간단합니다. 사용자 정의 구성 요소에 value 속성을 추가하고 name 특성을 설정하기만 하면 됩니다.
사용자 정의 폼 컴포넌트를 사용할 때, 폼에 추가하고 필요한 name 속성만 설정하면 됩니다. 위 예시에서는 <custom-input> 요소를 추가하고 name 속성을 설정하여 사용자 정의 폼 컴포넌트를 사용했습니다. 그런 다음 formData() 메서드를 사용하여 입력 요소와 사용자 정의 컴포넌트의 값을 모니터링하여 실시간으로 폼 데이터를 가져오고 처리할 수 있습니다. 이 방법을 사용하면 사용자 정의 폼 컴포넌트를 포함하여 폼을 매우 쉽게 확장할 수 있으므로 특정 요구 사항을 충족할 수 있습니다.
컴포넌트 또는 페이지 내에서 양식 데이터 사용하기
때로는 컴포넌트나 페이지 내에서 폼 데이터를 사용해야 할 수 있으며, attached 주기 생명주기 시점에 데이터를 생성하여 컴포넌트에 바인딩해야 합니다.
{{logtext}}
attached 주기 생명주기를 통해, 컴포넌트가 준비된 후에 this.shadow.formData() 메서드를 사용하여 폼 데이터 객체 fdata를 생성했습니다.
formData() 는 상호작용 로직이 비교적 단순한 폼 시나리오에 더 적합합니다.