Ruby on Rails 애플리케이션에서 Hotwire의 Turbo를 사용하여 동적으로 DOM을 업데이트할 때, 새로 추가되거나 교체된 HTML 요소에 포함된 JavaScript를 초기화해야 하는 문제가 발생할 수 있습니다. Turbo 자체는 HTML 요소만 처리하므로, JavaScript 실행은 개발자의 몫입니다.
이 문제를 해결하는 Hotwire의 공식적인 방법은 Stimulus를 활용하는 것입니다. Stimulus는 MutationObserver API를 기반으로 DOM 변경을 감지하며, HTML 요소에 data-controller 속성이 추가되면 해당 컨트롤러의 connect 메서드를 자동으로 호출합니다. 따라서 필요한 JavaScript 초기화 코드를 Stimulus 컨트롤러의 connect 메서드 안에 작성하고, Turbo Stream으로 전달되는 HTML에 해당 컨트롤러를 연결하면 됩니다.
하지만 경우에 따라 Stimulus 사용이 적합하지 않을 수 있습니다. 이러한 상황을 위해 Turbo Stream 렌더링 완료 후 실행되는 커스텀 이벤트를 구현하는 방법이 있습니다. 기존에 존재하는 turbo:before-stream-render 이벤트 리스너에 새로운 로직을 추가하는 방식입니다. turbo:before-stream-render 이벤트 발생 시, 원래의 렌더링 함수를 래핑(wrap)하여 렌더링이 완료된 후 customEvent인 turbo:after-stream-render를 dispatch하도록 구현할 수 있습니다. 이렇게 구현된 customEvent를 리스닝하여 필요한 JavaScript 코드를 실행할 수 있습니다.
Turbo Stream 렌더링 후 JavaScript를 실행하는 방법은 Hotwire의 권장 방식인 Stimulus 컨트롤러를 사용하는 것과, 필요에 따라 커스텀 이벤트를 구현하는 두 가지 주요 접근 방식이 있습니다. Stimulus는 DOM 변경 감지를 통해 자동 초기화를 제공하며, 커스텀 이벤트는 더 직접적인 후처리 로직 구현을 가능하게 합니다. 개발자는 애플리케이션의 요구사항과 구조에 맞춰 적절한 방법을 선택할 수 있습니다.