dispatch를 활용한 Stimulus 컨트롤러 간 통신은 HTML 구조와 JavaScript 컨트롤러 코드의 긴밀한 상호작용을 통해 이루어집니다.
HTML 구조 및 이벤트 설정
예제는 <main>과 <aside> 두 컨테이너에 각각 checkable Stimulus 컨트롤러가 연결된 체크박스들을 포함합니다. * 식별자: 모든 체크박스는 data-checkable-id-value 속성을 통해 고유 ID를 가지며, 이는 <main>과 <aside>의 동일 항목을 연결하는 역할을 합니다. * 이벤트 리스너: * <main>의 체크박스는 checkable:statusChanged@window->checkable#setStatus와 같이 사용자 정의 이벤트를 수신합니다. @window는 컨트롤러 스코프 외부 이벤트를 전역적으로 수신함을 의미합니다. * <aside>의 체크박스는 click->checkable#toggle 액션을 통해 click 이벤트를 처리합니다.
Stimulus 컨트롤러 (checkable_controller.js)
checkable_controller.js는 체크박스 간 통신을 담당하는 핵심 로직을 정의합니다. * 공유 값: static values = { id: Number }를 통해 <main>과 <aside> 체크박스 간 공유되는 id 값을 정의합니다. * setStatus(ev) 메서드: * checkable:statusChanged 이벤트를 수신할 때 실행됩니다. * ev.detail.id와 ev.detail.checked에서 이벤트 상세 정보를 추출합니다. * 수신된 id가 현재 컨트롤러의 idValue와 일치하는 경우에만 this.element.checked를 업데이트하여 해당 체크박스의 상태를 변경합니다. 이는 특정 체크박스만 반응하도록 하여 불필요한 동작을 방지합니다. * toggle(ev) 메서드: * <aside> 체크박스의 click 이벤트에 의해 호출됩니다. * this.idValue와 ev.target.checked를 포함하는 detail 객체를 생성합니다. * this.dispatch(‘statusChanged’, { detail: detail })을 호출하여 statusChanged 사용자 정의 이벤트를 발생시킵니다. 이때 detail 객체에 상태 정보를 담아 이벤트 리스너에게 전달하여, <main>의 체크박스가 자신의 상태를 동기화하도록 합니다.
이러한 구현을 통해 <aside>의 사용자 상호작용이 dispatch를 통해 이벤트를 발생시키고, <main>의 컨트롤러가 이를 수신하여 UI 상태를 효율적으로 동기화합니다.