jQuery Mobile에서 페이지 간 데이터 전달하기
jQuery Mobile으로 앱을 개발하다 보면 목록 화면에서 상세 화면으로 이동할 때처럼, 한 페이지에서 다른 페이지로 특정 값을 넘겨야 하는 경우가 자주 발생합니다. jQuery Mobile은 일반적인 웹과 달리 AJAX 기반으로 페이지를 로드하기 때문에, URL의 쿼리 문자열(query string)을 활용하면 간단하게 데이터를 전달할 수 있습니다.
1단계: 링크에 쿼리 문자열 추가하기
값을 전달하려면 먼저 <a> 태그의 href 속성 뒤에 물음표(?)와 함께 키=값 형태의 파라미터를 붙여줍니다. 예를 들어 new.html 페이지로 '123'이라는 구조값(structure)을 전달하고 싶다면 다음과 같이 작성합니다.
<a href="new.html?structure='123'">Structure</a>2단계: pageinit 이벤트에서 전달된 값 받기
데이터를 받을 페이지(new.html)에서는 pageinit 이벤트를 활용합니다. 이 이벤트는 해당 페이지가 처음 초기화될 때 딱 한 번 실행되므로, 전달받은 파라미터를 처리하기에 가장 적합한 시점입니다.
$( document ).on( "pageinit", "#new", function( event ) {
// URL에서 '?' 뒷부분(쿼리 문자열)만 추출
var parameters = $(this).data("url").split("?")[1];
// 필요 없는 키 이름('structure=')을 제거하여 값만 남김
var myParam = parameters.replace("structure=", "");
alert(myParam); // 결과: '123'
});코드 동작 원리 살펴보기
- $(this).data("url"): jQuery Mobile이 내부적으로 관리하는 페이지의 전체 URL을 반환합니다.
- .split("?")[1]: URL을 물음표(?)를 기준으로 나눈 뒤, 두 번째 조각 즉 쿼리 문자열 부분만 가져옵니다.
- .replace("structure=", ""): 쿼리 문자열에서 키 이름을 제거해 실제 값만 추출합니다.
위 코드가 정상적으로 실행되면 new.html 페이지가 열릴 때 '123'이라는 값이 알림 창(alert)으로 표시됩니다.
알아두면 좋은 팁
- 여러 개의 값을 전달해야 한다면 앰퍼샌드(&)로 구분하여 new.html?structure='123'&type='A'처럼 작성하고, split('&')으로 분리한 뒤 각각 처리하면 됩니다.
- 전달받은 값이 숫자라면 parseInt()나 Number()로 형 변환한 후 사용하는 것이 안전합니다.
- jQuery Mobile 1.4 버전부터는 pageinit 대신 pagecreate 이벤트와 pagecontainer 위젯 사용이 권장되며, 최신 환경에서는 URLSearchParams 객체를 활용하면 더 깔끔하게 파라미터를 파싱할 수 있습니다.
이처럼 쿼리 문자열과 pageinit 이벤트만 활용하면 별도의 라이브러리 없이도 jQuery Mobile에서 페이지 간 데이터 전달을 손쉽게 구현할 수 있습니다.