[iOS] 테이블 뷰 컨트롤러에서 페이징 처리 구현하기 - HoonIOS

안녕하세요, HoonIOS입니다.

 

이번에는 페이징 처리에 대해 포스팅하려고 합니다. 많은 앱들이 메모리나 앱 관리를 위해서 많이 구현하고 있으므로 중요한 기술입니다. :)

 

 페이징 처리란?

 

 

페이징 처리란 API의 총데이터에서 우리가 읽어오는 데이터는 일부에 불과합니다. 만약에 사용자가 화면에 보여주는 데이터 말고 다른, 더 많은 데이터를 원할 때 데이터를 추가해주는 기능이 필요한데 이것을 페이징 처리라고 하고 간단하게 더보기 기능이라고도 합니다.

 

 

페이징 처리기능이 생긴 이유는 API로 부터 받은 데이터는 전체 데이터가 아니라 일부 데이터만 받아오기 때문입니다.

 

그럼 한번에 받아오면 되잖아?라고 생각하시는 분들이 있을 수 있지만

 

이렇게 일부 데이터만 받아오는 이유는 몇십건 정도 작은 데이터를 받을 때는 상관이 없지만 엄청나게 많은 데이터를 한 번에 받으려고 하면 서버에 과부하가 걸릴 수 있어 성능상에 문제가 발생할 수 있습니다.

 

그리고 또 다른 이유로는 클라이언트에서 한, 두개의 데이터만 보면 되는데 수많은 데이터를 받음으로써 메모리 낭비를 야기시킬 수 있습니다.

또 데이터를 대량으로 받게되면 데이터의 크기도 커지기 때문에 그만큼 데이터 받는 시간도 오래 걸려 네트워크 자원 낭비도 야기할 수 있습니다.

 

예를 들어서 설명을 해보면 지니나 멜론 노래 앱의 순위 차트를 생각해보시면 됩니다. 사용자가가 90, 99번째까지 순위가 궁금한데 1000위 그 이상의 노래들까지 읽어 들어 가져오게 된다면 이것은 메모리에 상당히 치명적일 수 있습니다.

 

페이징 처리를 어떻게 해줘야 하나요? 

 

놀라실 수도 있지만 페이징 처리를 하기 위해서는 클라이언트에서는 받는 설정만 구분해주면 됩니다. 사실상 서버 측에서 중요하게 구현을 해줘야 하는데 나눠서 보내줄 수 있도록 기능을 구현해야 합니다. :)

 

페이징 처리의 대표적인 방법은 2가지가 있습니다.

 

 페이징 처리의 대표적인 방법 

 

1. 더보기 버튼을 통해 버튼에 클릭 이벤트를 주면 추가 데이터를 읽어오는 방법입니다.
   ( 뒤에 예시에서 간단하게 구현해볼꺼에요 )
   
   
2. 맨 아래까지 스크롤하면 이를 앱에서 인식하고 자동으로 데이터를 더 추가해서 보여주는 방법입니다.
   ( UIScrollViewDelegate의 메서드로 scrollViewDidScroll(_:)을 사용하면 되는데 이 메서드는 맨 아래까지 도달했을 때 발생하는 메서드로 맨 아래로 도달했을 때 API를 호출해주는 작업을 해주면 됩니다.)

 

이제 페이징 처리를 구현해보겠습니다. 

 

여기서 포스팅했던 예시와 API를 토대로 구현을 했습니다.

<참조>

 

 페이징 처리 기능 추가

 

※ 참고

- 이 API 서버에서는 page인자 값을 통해 데이터를 나누어 받을 수 있도록 옵션을 제공하고 있습니다.

 

 

이제 더보기를 하면은 API를 통해 읽어오는 버튼 페이징 처리를 구현하겠습니다.

( 위에서 첫 번째 방법을 이용하겠습니다. )

 

* 설명

• 우선 페이징 처리를 해줄 버튼을 스토리보드에 추가를 해줘야 합니다. 이경우에는 데이터가 없을 시 아래에 빈 셀이 아니라 빈 화면을 보여주기 위해서 테이블 뷰 아래에 UIView를 추가해줬는데 거기에 버튼을 추가해주면 됩니다.

 

* 설명

• 이 버튼의 액션 메서드를 구현해줍니다. 
• 이 메서드에는 버튼을 클릭 시 API를 호출해주는 코드를 작성해줄 예정입니다.

 

* 설명

• 이 page변수는 현재 어디까지 표시가 되어있는지 구분하기 위한 변수입니다.
• 이 변수는 클래스의 프로퍼티로 즉 전역 변수로 선언을 해줘야 합니다.
  
  만약 메서드 내에 지역변수로 선언을 하게 되면 앱의 메서드 실행이 종료되면 메서드 내에 있는 이 변수도 함께 종료되므로 해당 메서드가 종료가 되게 되면 page변수는 계속 1로 초기화를 하게 됩니다.
• 만약 앱을 종료하고 다시 킬 시에는 처음부터 화면이 표시되는 형태로 구현이 됩니다.
  
  

이제 아울렛 메서드 안에 페이지를 증가해주고 API를 호출해주는 메서드를 구현해야 합니다.

 

API를 호출해 주는 부분은 앞에서 보여드린 포스팅하고 같은 page를 증가해주는 부분만 가져와보겠습니다.

 

 

단! 이 부분에서 중요한 것은 API만 불러오면 그냥 데이터 소스에 값만 추가돼 numverOfRowInSection인 데이터 소스 메서드를 불러오지 않아 아무것도 표시가 되지 않습니다. 따라서 테이블 뷰를 다시 읽어오게 reload를 해줘야 합니다.

 

 

 

※ reloadData메서드란?

 

- 테이블 뷰를 재 로딩하는데 필요한 메서드로 사용 가능한 셀의 데이터를 다시 읽어오고 새로운 값으로 인해 테이블 뷰 셀을 그리기 위한 메서드입니다.

 

 

만약에 데이터를 다 읽어와서 마지막 페이지인데 더보기 버튼이 아직도 있으면 사용자가 상당히 당황스러울 수 있습니다.

 

따라서 전체 데이터를 다 읽어서 보여줬을 때 버튼을 숨겨주는 기능을 추가해보겠습니다.

 

* 코드 설명

• 이 API에서는 totalCount 키의 값으로 전체 데이터 개수를 나타내는 것을 저번 포스팅에서 확인했었습니다.
  
  
  
• NSString.integerValue변수는 string형을 int형으로 변환해서 가져오는 프로퍼티입니다.
  
  만약 해당 문자열이 숫자가 아니라면 0을 return 하게 됩니다.

이제 이 전체 데이터의 개수가 테이터 배열의 개수보다 크면은 숨겨주는 속성을 구현해줘야겠죠?

 

* 코드 설명

• UIView 속성의. isHidden 프로퍼티를 통해 구현을 해줄 수 있습니다.
  
  
  . isHidden이 true면 해당 타입은 가려지게 되고 만약 false면 해당 타입은 보이게 됩니다.
  
  
• UIButton은 UIView를 상속하고 있어 부모 클래스인 UIView형태의 속성을 사용할 수 있습니다.
  ( 사실은 UIControl가 부모 클래스 UIView를 상속하고 있는데 UIButton은 UIControl을 부모 클래스로 상속을 하고 있어 조상 클래스의 속성을 쓰고 있는 게 맞는 말입니다. :)

이제 모두 마무리했습니다. 이제 더보기 버튼을 눌렀을 때 데이터를 더 읽어오는지 한번 확인해보겠습니다. :)

 

 

 

현재 많은 앱들이 페이징 처리를 사용하고 있는 만큼 중요한 기능이라고 생각합니다.

 

페이징 처리에서 중요한 것은 클라이언트에서 일반적으로 구현할 수 있는 것이 아니고 서버에서 해당 기능을 구현을 해줘야 클라이언트에서 작성을 하는 것으로 페이징 처리 기능을 구현을 필요할 때는 서버 개발자분에게 부탁을 해야 되겠습니다!