Stimulus 컨트롤러 설정
동적 레이블 처리를 위해 number_input_controller라는 Stimulus 컨트롤러를 생성합니다. 이 컨트롤러는 다음과 같은 정적 속성을 가집니다:
* static values: singular (단수형)와 plural (복수형) 텍스트를 정의합니다. 각 값은 String 타입이며 기본값은 비어 있습니다.
* static targets: numberText라는 하나의 타겟을 정의합니다. 이 타겟은 입력 필드 옆에 표시될 텍스트 요소를 가리킵니다.
컨트롤러를 HTML에 연결하기 위해 부모 div 요소에 data-controller="number-input" 속성을 추가합니다. numberText 타겟은 <div data-number-input-target="numberText"></div>와 같이 텍스트를 감싸는 div에 지정됩니다.
Stimulus Values를 이용한 데이터 전달
Stimulus의 values는 HTML 속성을 통해 JavaScript 컨트롤러에 데이터를 전달하고 자동으로 동기화하는 강력한 기능입니다. 이를 통해 “night”의 단수형과 복수형 정보를 컨트롤러에 전달할 수 있습니다.
* this.singularValue, this.pluralValue와 같은 속성을 통해 값에 접근할 수 있습니다.
* this.hasSingularValue 등으로 값의 존재 여부를 확인할 수 있습니다.
* HTML 속성 변경 시 singularValueChanged()와 같은 특별한 메서드를 정의하여 반응할 수 있습니다.
단수 및 복수 값 설정
컨트롤러가 동적으로 타겟을 업데이트하는 데 사용할 단수 및 복수 값은 HTML 속성을 통해 정의됩니다. 예를 들어, 텍스트가 “night”일 경우 다음과 같이 설정합니다:
* data-number-input-singular-value="<%= text %>"
* data-number-input-plural-value="<%= text.pluralize %>"
여기서 <%= text.pluralize %>는 Ruby on Rails의 pluralize 헬퍼를 사용하여 복수형을 자동으로 생성합니다.
입력 필드 및 액션 추가
입력 필드와 상호작용할 때 레이블이 업데이트되도록 data-action 속성을 사용하여 Stimulus 액션을 연결합니다. 일반적인 입력 필드 예시는 다음과 같습니다:
* <input data-action="number-input#updateNumberText" />
이 액션은 사용자가 입력 필드와 상호작용할 때마다 Stimulus 컨트롤러의 updateNumberText 메서드를 트리거합니다.
updateNumberText 메서드는 다음과 같이 구현됩니다:
javascript
updateNumberText(event) {
this.numberTextTarget.textContent =
event.target.value == 1 ? this.singularValue : this.pluralValue
}
이 메서드는 입력 필드의 값(event.target.value)을 확인하여:
* 값이 1이면 this.singularValue (예: “night”)를 사용합니다.
* 그 외의 모든 값에 대해서는 this.pluralValue (예: “nights”)를 사용합니다.
numberTextTarget의 textContent가 동적으로 업데이트되어 적절한 레이블을 반영합니다.