[Kotlin / Compose] 당겨서 새로고침 화면 구현하기

Kotlin으로 아래로 당겼을 때 화면이 새로고침 되는 것을 Swiperefreshlayout를 사용하여 구현하였는데, Jetpack Compose에서도 해당 기능을 구현 하고 싶어 찾아보다 rememberPullToRefreshState 라는 것을 알게 되었다.
rememberPullToRefreshState를 사용하여 당겨서 새로고침 되는 화면을 구현하는 방법을 정리하고자 한다.

rememberPullToRefreshState

rememberPullToRefreshState는 사용자가 화면을 당겨 새로고침을 트리거하는 패턴인 Pull to Refresh 기능을 구현할 때 사용되며, Pull to Refresh 상태를 기억하고 관리하는 데 사용된다.

새로고침 상태 기억

• Pull to Refresh의 상태를 기억하는 rememberPullToRefreshState 함수를 변수에 선언한다.

val refreshState = rememberPullToRefreshState()

새로고침 이벤트 처리

• refreshState.isRefreshing는 새로고침 상태를 나타내는 Boolean 값이다.
• 새로고침이 시작되면 onRefresh() 함수가 호출되고, onRefresh() 함수 내에서 데이터 새로고침 작업을 수행한다.
• 새로고침 작업이 완료되면 refreshState.endRefresh()를 호출하여 새로고침 상태를 종료한다.

if (refreshState.isRefreshing) {
    onRefresh()
    refreshState.endRefresh()
}

UI 구성

• Box에서nestedScroll를 사용하여 Pull to Refresh 동작을 처리한다.

	.nestedScroll(refreshState.nestedScrollConnection)

• Column을 사용하여 수직으로 배치하고 verticalScroll(rememberScrollState())를 사용하여 스크롤을 가능하게 만든다.
• PullToRefreshContainer : Pull to Refresh 인디케이터를 화면 상단에 표시하며, state로 refreshState를 전달하여 새로고침 상태를 관리한다.

Surface(
    modifier = Modifier.padding(innerPadding),
    color = MaterialTheme.colors.gray9
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .nestedScroll(refreshState.nestedScrollConnection)
    ) {
		Column( // 새로고침 가능한 영역 
			modifier = Modifier
				.fillMaxSize()
				.verticalScroll(rememberScrollState())
				.padding(horizontal = Paddings.xlarge),
		) {
        
        ...
        
		}
		PullToRefreshContainer(
          state = refreshState,
          containerColor = MaterialTheme.colors.gray9,
          contentColor = MaterialTheme.colors.primary,
          modifier = Modifier.align(Alignment.TopCenter)
		)
	  }
	}

👀 동작 과정을 다시 정리해보면 !
1. Column 영역에서 스크롤을 아래로 당긴다.
2. nestedScrollConnection을 통해 새로고침 동작이 트리거된다.
3. refreshState.isRefreshing가 true로 설정되면 onRefresh() 함수가 호출되어 데이터 새로고침 작업이 수행된다.
4. 새로고침 작업이 완료되면 refreshState.endRefresh()가 호출되어 새로고침 상태가 종료된다.
5. PullToRefreshContainer는 새로고침 인디케이터를 화면 상단에 표시하고, 새로고침 상태에 따라 인디케이터를 제어한다.