[Xamarin.Forms] XAML Hot Reload

2019. 8. 6. 15:14Mobile/Xamarin

이 포스트는 https://devblogs.microsoft.com/xamarin/xaml-hot-reload/를 참고하여 작성되었습니다.

2019년 7월 11일 Xamarin Developer Summit에서 Xamarin.Forms를 위한 XAML Hot Reload 기술이 공개되었습니다. XAML Hot Reload를 통해 XAML 코드 수정 결과를 빌드나 배포하는 과정없이 실시간으로 확인하실 수 있습니다. 이를 통해 UI를 수정하고 빌드하고 결과를 확인하는 반복작업에 소요되는 시간을 획기적으로 단축시킬 수 있게 되었습니다.

XAML Hot Reload는 모든 Third-party 컨트롤과 라이브러리를 지원합니다. 시뮬레이터, 에뮬레이터, 모바일 장치 등 모든 Deployment Target에서 동작합니다. Visual Studio 2019와 Visual Studio 2019 for Mac에서 이용하실 수 있으며 iOS와 Android 플렛폼을 지원합니다.
(참고: Visual Studio 2017의 Xamarin Live Reload는 Visual Studio 2019에서 더 이상 지원하지 않으며 XAML Hot Reload로 대체되었습니다.)

사용 방법

XAML Hot Reload는 2019년 하반기 부터 이용가능 합니다. 미리 사용해보실 분들은 다음 링크를 방문하시면 Preview 버전 이용신청을 하실 수 있습니다. 신청하시면 수일 내에 사용안내 메일을 받으실 수 있습니다.

* 사용신청: https://visualstudio.microsoft.com/vs/features/xaml-hotreload/

안내메일을 통해 XAML Hot Reload 모듈의 설치Xamarin.Forms 4.1 이상의 Nuget Package 설치를 완료하면 별도의 설정없이 XAML Hot Reload가 항상 활성화됩니다.

기능설명

XAML 파일을 수정하고 저장버튼을 누를 때 실시간으로 결과가 반영되며 iOS Simulator나 Android Emulator, 혹은 모바일 장치에 변경결과가 즉시 나타납니다.

XAML Hot Reload를 사용하기 위해 추가적인 패키지나 라이브러리 설치가 불필요합니다. 또한 복잡한 코드 블럭도 요구하지 않습니다. Visual Studio 2019의 디버거를 통해 작동하기 때문에 추가적인 설정이나 네트워크 연결이 필요하지 않습니다.

수정사항이 반영될 때 Navigation 상태는 그대로 유지되며, 만약 MVVM 패턴을 사용했다면 ViewModel에 연결된 UI 상태도 유지되게 됩니다.

XAML Hot Reload Support

XAML Hot Reload는 모든 유효한 XAML Type을 지원합니다. 따라서 Page, Application, Shell, View를 수정하면 변경사항이 실시간으로 반영됩니다. 만약 MyControl.xaml을 수정하고 저장하면 MyControl.xaml를 참조하는 모든 XAML 페이지에 변경사항이 반영되게 됩니다.

코드에 오탈자가 발생하거나 지원되지 않는 수정사항에 대해서는 동작하지 않습니다.
2019년 8월 6일 현재 다음 변경사항은 Hot Reload에서 지원하지 않습니다.

  • Code-behind 수정
  • CSS 수정
  • 이미지 업데이트
  • 기타 Non-XAML 리소스 수정

수정사항이 발생하면 Visual Studio는 유효성을 검증하며, 유효하지 않으면 XAML 코드상에 구불구불한 선으로 오류를 표시합니다. Visual Studio의 Output 창을 통해서도 반영여부를 확인하실 수 있습니다.

Xamarin 팀은 Telerik, Infragistics, Grial UI Kit, Prism, Syncfusion 등 모든 컨트롤 제작사와 오픈소스 프로젝트 관리자와 협업 중이며 이를 통해 XAML Hot Reload가 모든 프로젝트에서 안정적으로 동작할 수 있도록 지원할 예정입니다.

개발 로드맵

XAML Hot Reload는 다음과 같은 추가기능을 지원할 예정입니다.

  • 자동 부분 새로고침(Incremental Reloading): 오로지 변경된 컨트롤과 Property만 새로고침
  • 동시 새로고침(Simultaneous Reloads): 디버깅 중인 플렛폼이 여러개라면 동시에 변경사항을 반영하기
  • 향상된 상태 모니터링(Improved status monitoring): 유효하지 않거나 잘못된 수정사항이 발생했을 때, 이 내용을 알려주기 위한 향상된 UX제공
  • CSS: Cascading Style Sheet에 대한 변경사항을 XAML Live Reload에서 지원하기