Hotwire와 함께 Turbo Streams에서 View Component 활용하기

View Components Over Turbo Streams with Hotwire | But It Works on My Machine!

작성자
발행일
2025년 09월 28일

핵심 요약

  • 1 Turbo Streams에서 ViewComponent를 사용하여 부분 템플릿(partials) 대비 향상된 성능, 유지보수성, 테스트 용이성 및 UI 일관성을 확보할 수 있습니다.
  • 2 기존 `partial: "..."` 대신 `renderable: YourComponent.new(...)` 구문을 통해 Turbo Streams에서 ViewComponent를 손쉽게 렌더링할 수 있습니다.
  • 3 ViewComponent는 부분 템플릿보다 최대 2배 이상 빠른 렌더링 속도를 제공하며, 뷰 로직의 캡슐화와 독립적인 테스트를 가능하게 합니다.

도입

Hotwire는 2020년 출시 이후 Rails 애플리케이션의 실시간 업데이트 방식을 혁신했습니다. 본 글에서는 2023년에 도입된, Turbo Streams에서 ViewComponent를 활용하는 방법을 소개합니다. 이 접근 방식은 기존 부분 템플릿(partials)의 한계를 극복하고, 애플리케이션의 성능, 유지보수성, 테스트 용이성을 크게 향상시킬 수 있는 효과적인 솔루션입니다.

Turbo Streams와 ViewComponent

Turbo Streams는 Rails에서 웹소켓을 통해 실시간 UI 업데이트를 가능하게 합니다. 기존에는 partial: "..."를 사용하여 부분 템플릿을 렌더링했으나, 이는 로직 누수, 재사용성 제한, 대량 렌더링 시 성능 저하 등의 문제를 야기합니다.

ViewComponent는 뷰 로직을 캡슐화하여 재사용 가능하고 테스트 가능한 Ruby 클래스로 만듭니다.

  • 캡슐화: 로직을 컴포넌트 내에 집중.

  • 재사용성: 다양한 뷰와 스트림에서 활용.

  • 테스트 용이성: 독립적인 단위 테스트 가능.

  • 성능: 벤치마크에서 부분 템플릿보다 약 2.5배 빠름.

Turbo Streams에서 ViewComponent 활용

Turbo::StreamsChannel.broadcast_append_to 호출 시, partial: "..." 대신 renderable: MessageComponent.new(...) 구문을 사용합니다. 이는 ViewComponent가 HTML을 생성하고, Turbo Streams가 이를 <turbo-stream> 태그로 래핑하여 클라이언트에 푸시합니다.

이점 및 벤치마크

이 방식은 성능 향상(부분 템플릿 대비 1.5~2배 빠름), 유지보수성 증대, 테스트 용이성, 그리고 UI 일관성 확보에 기여합니다.

결론

Turbo Streams에서 부분 템플릿 대신 ViewComponent를 사용하는 것은 구현이 간단하면서도 애플리케이션에 큰 이점을 제공합니다. 더 빠른 렌더링, 깔끔한 코드, 쉬운 테스트, 그리고 재사용 가능한 UI 요소를 통해 개발 효율성과 사용자 경험을 동시에 개선할 수 있습니다. 이 전환은 Hotwire 기반 Rails 애플리케이션의 품질을 높이는 중요한 전략이 될 것입니다.

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!