기존 커스텀 요소 방식의 한계

이전의 커스텀 요소 접근 방식은 <optimistic-form> 래퍼 안에 폼과 템플릿이 포함되어 커스텀 요소의 정의, 등록, 생명주기 관리가 필요했습니다. 이는 기능적으로 훌륭했지만, 개발자에게 추가적인 마크업 및 JavaScript 오버헤드를 요구했습니다.

데이터 속성 기반의 새로운 접근

새로운 방식은 일반적인 Rails form_with 헬퍼에 다음과 같은 데이터 속성을 추가하여 구현됩니다:

• data-optimistic: true: 폼이 낙관적 UI를 사용함을 나타냅니다.

• data-optimistic-target: "messages": 생성된 요소가 삽입될 대상 DOM 요소의 ID를 지정합니다.

• data-optimistic-template: "message-template": 복제할 템플릿 요소의 ID를 지정합니다.

• data-optimistic-position: "prepend" (또는 append): 요소를 대상에 삽입할 위치를 지정합니다.

템플릿은 <template id="message-template"> 형태로 폼과 분리되어 존재하며, 렌더링될 메시지 구조를 포함합니다. 이 템플릿 내의 data-field="message[content]"와 같은 속성은 폼 데이터로 동적으로 채워질 필드를 표시합니다.

JavaScript 구현 상세

핵심은 OptimisticForm이라는 정적(static) JavaScript 클래스입니다. 이 클래스는 다음과 같은 Turbo 이벤트를 수신합니다:

• turbo:submit-start: 폼 제출이 시작될 때 발동합니다.
  • data-optimistic="true" 속성을 가진 폼인지 확인합니다.
  • FormData를 사용하여 폼 데이터를 추출합니다.
  • 지정된 템플릿을 복제하고, 폼 데이터로 템플릿 내 data-field 요소를 채웁니다.
  • data-optimistic-target에 지정된 대상에 data-optimistic-position에 따라 요소를 삽입합니다.
• turbo:submit-end: 폼 제출이 완료될 때 발동합니다.
  • 폼을 초기화(form.reset())하여 사용자에게 즉각적인 피드백과 다음 입력을 위한 준비를 제공합니다.

코드 가독성 및 정적 메서드 활용

JavaScript 메서드에서는 객체 비구조화 할당을 활용한 명명된 매개변수 스타일(`this.

build({ form, with: formData }))을 사용하여 코드의 가독성을 크게 높였습니다. 또한, OptimisticForm` 클래스의 모든 메서드가 정적으로 구현된 것은 상태 관리가 필요 없고, 단순히 DOM 조작을 수행하는 이 특정 사용 사례에서 인스턴스 생성이 불필요한 복잡성을 추가하기 때문입니다. 클래스는 관련 함수들의 네임스페이스 역할을 하여 코드를 간결하게 유지합니다.