Hotwire는 Rails에서 서버사이드 렌더링을 통해 프론트엔드를 간소화하며, 특히 Turbo Stream은 동적인 페이지 업데이트를 가능하게 합니다. 초기에 Turbo Stream은 append, update, remove와 같이 DOM을 직접 조작하는 액션에 집중했지만, 약 3년 후 페이지 새로고침을 지시하는 refresh 액션이 추가되었습니다. 이 refresh 액션은 기존 DOM 조작 액션과 달리 현재 경로로 새로운 GET 요청을 시작한다는 점에서 근본적인 차이가 있습니다.
refresh 액션의 도입 배경
refresh 액션은 Action Cable을 통한 브로드캐스트 상황에서 세분화된 Turbo Stream 액션 대신 간소화된 대안을 제공하기 위해 도입되었습니다. Action Cable 사용 환경에서는 클라이언트가 이미 JavaScript를 지원하므로, refresh 지시를 Turbo Stream으로 보내는 것이 적절합니다. 이는 서버로부터 새로운 페이지 상태를 브로드캐스트 메시지를 통해 효율적으로 가져오는 데 유용합니다.
모핑(Morphing) 기능의 활용
refresh 액션은 페이지 새로고침 시 변경된 요소만 지능적으로 교체하는 ‘모핑’ 기능을 활용합니다. idiomorph 라이브러리에 의해 구현되는 이 기능은 새로운 콘텐츠와 이전 콘텐츠의 ID 세트를 비교하여 변경된 부분만 업데이트합니다. 이를 통해 불필요한 DOM 조작을 줄이고 부드러운 사용자 경험을 제공하며, React와 같은 복잡한 프레임워크 없이도 상호작용적인 웹 경험을 구축할 수 있습니다.
DOM 상태 관리와 해결 전략
refresh 액션으로 인한 전체 페이지 새로고침은 사용자 상호작용으로 변경된 드롭다운, 모달, 파일 업로드 등 DOM의 현재 상태를 손실시킬 수 있습니다. 이러한 문제를 해결하기 위해 Turbo는 다음과 같은 옵션을 제공합니다.
-
data-turbo-permanent속성: 특정 요소에 이 속성을 추가하면 모핑 시 해당 요소를 건너뛰어 상태를 보존할 수 있습니다. -
JavaScript 이벤트 제어: 모핑 관련 JS 이벤트를
preventDefault로 막아 특정 조건에서만 모핑을 방지할 수 있습니다. -
부분적 업데이트 전략: 복잡한 DOM 상태를 가진 페이지의 경우,
update,replace와 같은 다른 Turbo Stream 액션이나 Turbo Frames를 사용하여 페이지의 특정 부분만 업데이트하는 것이 더 효과적입니다. Turbo Frames는 페이지의 일부를 격리하여 독립적으로 다시 로드할 수 있게 하여, 전체 페이지 새로고침의 영향을 최소화합니다.
이러한 전략들을 통해 refresh 액션의 이점을 활용하면서도 사용자 경험을 저해하지 않는 효율적인 DOM 상태 관리가 가능합니다.