[Hybrid] jQuery Mobile 페이지 전환 방법

jQuery Mobile 은 기본적으로 Single Page Application 으로 되어 있습니다. 따라서 우리가 데스크탑 PC의

브라우저서 보는 것과 같은 여러 페이지의 이동이 실질적으로 jQuery Mobile로 만든 App에서 발생하는 것

은 아닙니다. 다만 jQuery Mobile에서는 마치 여러 페이지를 이동하는 것처럼 보이도록 해줄 뿐 입니다.

물론, 모바일 App에서도 데스크탑 PC 브라우저에서 처럼 여러 페이지를 옮겨갈 수 있도록 구현할 수는 있

습니다. 단, 그것은 분류상 모바일웹 방식으로 만들어진 것으로 우리가 흔히 말하는 App이라고 볼 수는

없을 것입니다.

jQuery Mobile App 에서 페이지 전환을 구현하는 방법으로 2가지 방법이 있으며, 각각의 장단점은 다음

과 같습니다.

2가지 페이지 전환 방법

---

1. page 1개당 1개의 HTML 파일로 만드는 방법 (추천)

 - Main HTML DOM 에 다른 페이지 HTML 을 껴넣는 방식으로 모바일웹과 달리 로딩된 Main HTML은 

   계속 유지 됩니다.

 장점 : 분업하기가 편하다.

 단점 : 속도가 약간 저하된다.  

 

 Main HTML DOM에 다른 HTML을 껴넣을 때 DOM 트리를 다시 구성하는 리플로우가 발생하여 상대적으

 로 약간의 속도저하가 발생할 수 있습니다.

---

2. 1 개의 HTML에 여러 page를 작성하는 방법 (비추천)

 - Main HTML에 div 태그를 이용하여 여러개의 page를 배치하고, jQuery Mobile 라이브러리를 통해

   show/hide 방식으로 페이지를 전환하는 방법입니다.

 

 장점 : DOM 트리에서 리플로우가 일어나지 않기 때문에 상대적으로 빠르다.

 단점 : 분업하기가 어렵다. 초기 로딩 속도가 느리다.

두번째 방식은 첫 로딩 시 방대한 Main HTML을 로딩하기 때문에 App 구동 초기에 상당히 느릴 수 있습

니다. 따라서사용자 관점에서 모바일 App의 초기 로딩은 굉장히 중요한 부분이기 때문에 비추천하는 방식

입니다. 

또한 하나의 Main HTML 파일에 여러명의 개발자가 붙게되어 분업하기 어려운 단점이 있기 때문에 

첫번째 방식을 권장합니다. 

---