MJRefresh는 iOS에서 풀-투-리프레시 기능을 손쉽게 구현할 수 있도록 도와주는 인기 있는 라이브러리입니다. 이 글에서는 MJRefresh를 사용하여 여러 목록 간의 리프레시 상태를 효과적으로 유지하고 관리하는 10가지 유용한 기법을 소개합니다. 이를 통해 앱의 사용자 경험을 한층 더 향상시킬 수 있습니다.

MJRefresh 기본 연동

CocoaPods를 통한 설치

Podfile에 다음 의존성을 추가합니다:

pod 'MJRefresh'

이후 터미널에서 pod install 명령어를 실행하여 설치를 완료합니다.

수동 설치

MJRefresh 저장소를 클론한 후, 프로젝트에 필요한 소스 파일들을 직접 추가하는 방식도 가능합니다: git clone https://gitcode.com/gh_mirrors/mj/MJRefresh

핵심 사용법

UITableView에 풀-투-리프레시 연동

UITableView에 헤더 리프레시 컨트롤을 추가하는 예시입니다:

// 헤더 리프레시 컨트롤 설정
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
    // 새로운 데이터 로드 로직
    [self fetchNewData];
}];

// 즉시 새로고침 시작
[self.tableView.mj_header beginRefreshing];

UICollectionView에 상단 로딩 연동

UICollectionView에 푸터 로딩(더보기) 컨트롤을 추가하는 예시입니다:

// 푸터 로딩 컨트롤 설정
self.collectionView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
    // 추가 데이터 로드 로직
    [self fetchMoreData];
}];

고급 활용 기법

커스텀 리프레시 애니메이션 구현

MJRefreshGifHeader를 활용하여 GIF 이미지 등을 이용한 커스텀 애니메이션을 적용할 수 있습니다:

MJRefreshGifHeader *gifHeader = [MJRefreshGifHeader headerWithRefreshingBlock:^{
    // 리프레시 로직
}];

// 일반 상태일 때 표시될 이미지들 설정
[gifHeader setImages:idleImages forState:MJRefreshStateIdle];
// 새로고침 중일 때 표시될 이미지들 설정
[gifHeader setImages:refreshingImages forState:MJRefreshStateRefreshing];

self.tableView.mj_header = gifHeader;

다중 목록 간 상태 동기화

다른 테이블 뷰나 컬렉션 뷰로 전환할 때 기존 리프레시 상태를 유지하는 방법입니다:

// 현재 헤더의 상태 저장
MJRefreshState currentHeaderState = self.currentListView.mj_header.state;

// 이전 뷰 컨트롤러에서 상태 복원
if (currentHeaderState == MJRefreshStateRefreshing) {
    [self.previousListView.mj_header beginRefreshing];
}

일반적인 문제 해결

리프레시 컨트롤이 보이지 않는 경우

다음 사항들을 확인하십시오:

1. UIScrollView의 contentInset이 올바르게 설정되었는지 확인합니다.
2. 리프레시 컨트롤이 올바른 뷰 계층 구조에 추가되었는지 확인합니다.
3. 컨트롤의 frame 또는 오토레이아웃 설정이 올바른지 검토합니다.

리프레시 종료 후 상태가 복귀되지 않는 경우

데이터 로딩이 완료된 후 반드시 다음 메소드를 호출해야 합니다:

// 헤더 리프레시 종료
[self.tableView.mj_header endRefreshing];
// 푸터 로딩 종료
[self.tableView.mj_footer endRefreshing];

성능 최적화 팁

리프레시 중 UI 작업 최소화

리프레시 콜백 내에서는 복잡한 UI 업데이트나 메인 스레드에서 많은 작업을 피해야 합니다. 시간이 오래 걸리는 작업은 백그라운드 스레드에서 처리하는 것이 좋습니다.

리프레시 임계값 조정

mj_header.triggerDistance 또는 mj_footer.triggerDistance 속성을 조정하여 리프레시를 트리거하는 스크롤 거리를 조절할 수 있습니다.