스크롤 기반 페이징 기능 구현하기
지난 강의에서는 연동한 API 데이터를 플렉스튜디오 시나리오 화면에 표현하는 방법을 소개했어요. 이번 글에서는 스크롤할 때마다 데이터를 계속 불러오는 페이징 기능을 구현할 예정이에요.
예시로 제로페이 가맹점 목록을 확인할 수 있는 앱을 만들어보겠습니다. 페이징 기능을 구현할 때 가장 중요한 점은 페이징 상태를 관리하는 것이에요. 관리를 위해 API를 호출할 때 페이지 번호를 전달하여 동적으로 호출하도록 구성해야 합니다.
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/01/5-1%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8F%AC%ED%84%B8%20%ED%99%9C%EC%9A%A9%20%EC%8B%A0%EC%B2%AD%ED%95%98%EA%B8%B0_%EC%95%B1%EC%86%8C%EA%B0%9C.gif?width=800&height=450&name=5-1%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8F%AC%ED%84%B8%20%ED%99%9C%EC%9A%A9%20%EC%8B%A0%EC%B2%AD%ED%95%98%EA%B8%B0_%EC%95%B1%EC%86%8C%EA%B0%9C.gif)
👉 플렉스튜디오 유튜브에서 영상 강의 보러 가기
1단계 : API에 페이지 번호 전달
1. 플렉스튜디오 워크스페이스 - 좌측 데이터 메뉴 - API 연동 버튼 클릭
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_01.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_01.jpg)
2. Advanced Key Setting 탭 클릭
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_02.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_02.jpg)
3. Event Config Key 항목에 pageNo값 추가
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_03.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_03.jpg)
4. Params 탭에서 pageNo를 대체 표현식으로 지정해 동적으로 설정 / pageNo : {=Event.pageNo}
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_04.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_04.jpg)
5. 테스트 탭으로 이동
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_06.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_06.jpg)
6. pageNo 값을 변경 (예시 value : 1부터 증가하면서 테스트)
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_07.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_07.jpg)
7. TEST CALL 버튼 클릭하여 pageNo값이 동적으로 할당되는지 확인
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_08.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_08.jpg)
8. 우측 하단 배포 버튼 클릭
2단계 : 시나리오에서 페이징 상태 관리
1. 이벤트를 추가할 스텝 선택
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_10.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_10.jpg)
2. 스텝 이벤트 추가 - 이벤트 발생 시점 : ScrollEnd / 이벤트명 : API조회
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_11.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_11.jpg)
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_12.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_12.jpg)
3. 이벤트 연결 버튼 클릭
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_13.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_13.jpg)
4. 스크립트 추가
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_14.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_14.jpg)
-
- 다양한 방법 중 시나리오 내에서 전역 변수 _v를 활용하여 기능 구현
- _v.page = _v.page + 1로 페이지 번호를 1씩 증가
- 예시 스크립트 : if (!_v.pageNo){ _v.pageNo = 1 } else { _v.pageNo++ }
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_15.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_15.jpg)
5. 플렉스튜디오에서는 가장 상단에 있는 이벤트부터 순서대로 실행되기 때문에 스크립트 순서를 첫 번째로 변경
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_16.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_16.jpg)
3단계 : 이벤트에서 API 호출 설정
1. API 모듈 - Event Config Key에 등록된 pageNo 항목 확인-
- 변경한 Event Config Key가 적용되지 않았다면 모듈명 다시 선택 (모듈명 : 조회)
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_17.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_17.jpg)
2. pageNo에 대체 첵스트 입력 - pageNo : {%_v.pageNo%}
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_18.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_18.jpg)
3. 보내는 데이터 제거
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_19.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_19.jpg)
4. 받는 데이터 - 카테고리명 : list / 추가 유형으로 설정
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_20.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_20.jpg)
4단계 : 받아온 데이터를 화면에 반영
1. 데이터를 연결한 그룹의 상위 그룹 아이디 복사
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_21.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_21.jpg)
2. Event 탭 - 함수자동생성 - 기능/함수자동생성 - 그룹/레이아웃
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_22.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_22.jpg)
3. 다시 그리기 팝업에 붙여넣기
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_23.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_23.jpg)
5단계 : 디버거로 페이징 동작 확인
1. 시나리오 우측 상단의 화살표( ▶ ) 클릭하여 디버거 실행
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_24.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_24.jpg)
2. 정상적으로 동적하는지 확인
-
- 스크롤이 끝나면 ScrollEnd 이벤트 실행 → 다시 조회이벤트 호출 → 받는 데이터가 ‘list’ 카테고리에 추가 → 화면에 표시
%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8/04/5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_25.jpg?width=800&height=450&name=5-4%20%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%20%ED%8E%98%EC%9D%B4%EC%A7%95_25.jpg)
이제 플렉스튜디오에서 스크롤 기반으로 데이터를 불러오는 페이징 기능까지 구현했어요.
지금 바로 플렉스튜디오에서 공공데이터포털 Open API를 활용한 나만의 앱을 만들어 보세요!
{{ include_custom_fonts({"Pretendard_Regular":["Regular"],"Pretendard_SemiBold":["Semi Bold"]}) }}