1. Turbo Drive: 기본이자 시작점
모든 Hotwire 애플리케이션의 출발점은 Turbo Drive입니다. 이는 전체 페이지를 다시 로드하지 않고 <body> 태그만 교체하여 성능을 높입니다.
-
스크롤 유지:
<meta name="turbo-refresh-scroll" content="preserve">를 사용하여 페이지 새로고침 시 스크롤 위치를 유지할 수 있습니다. -
사용 시점: 일반적인 페이지 이동 및 전체적인 상태 갱신이 필요할 때 가장 먼저 고려해야 합니다.
2. Turbo Frames: 특정 영역의 독립적 갱신
페이지의 특정 부분만 독립적으로 업데이트해야 할 때 Turbo Frames를 사용합니다.
-
장점: 프레임 내부의 상호작용이 외부 페이지 상태에 영향을 주지 않으며, 특정 컨테이너 내부의 스크롤 위치를 완벽하게 유지합니다.
-
사례: 좋아요 버튼 클릭 시 버튼의 상태만 변경되는 경우처럼 업데이트 범위가 명확히 한정될 때 적합합니다.
3. Turbo Streams: 다중 UI 업데이트
하나의 요청으로 페이지의 서로 다른 여러 곳을 동시에 업데이트해야 할 때 필수적입니다.
-
구현: 컨트롤러에서
respond_to블록을 통해 Turbo Stream 포맷을 처리하며,turbo_stream.replace등을 사용하여 여러 DOM 요소를 조작합니다. -
사례: 좋아요 클릭 시 버튼 상태 변경뿐만 아니라, 헤더에 있는 ‘총 좋아요 수’ 카운트를 동시에 업데이트해야 하는 경우에 사용합니다.
4. Turbo Morph: 복잡한 상태 변화
Turbo Morph는 DOM의 변경 사항을 자동으로 계산하여 부드럽게 변환하는 기술입니다. 하지만 현재는 구현 시 예상치 못한 부작용이 발생할 수 있고 동작 원리가 복잡하여, Drive나 Stream으로 해결하기 어려운 특수한 경우에 신중히 접근해야 합니다.