[kotlin] Jetpack Compose에서 백엔드와의 통신 처리하기

11 Dec 2023

kotlin

Jetpack Compose는 안드로이드 앱의 사용자 인터페이스를 구축하기 위한 새로운 방법을 제공합니다. 이 기술은 백엔드와의 통신을 처리하는 데 있어 어떻게 사용될 수 있을까요?

1. Retrofit을 사용한 네트워크 통신 설정

안드로이드 앱에서 백엔드와의 통신을 처리하기 위해 Retrofit을 사용하는 것이 일반적입니다. Retrofit은 RESTful API 호출을 쉽고 간편하게 처리할 수 있는 라이브러리입니다.

implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")

위와 같이 Retrofit 의존성을 추가한 후, 네트워크 통신을 위한 API 인터페이스를 정의합니다.

interface ApiService {
    @GET("users/{user}/repos")
    suspend fun listRepos(@Path("user") user: String): List<Repo>
}

그리고 다음과 같이 Retrofit 객체를 생성하여 사용합니다.

val retrofit = Retrofit.Builder()
    .baseUrl("https://api.github.com/")
    .addConverterFactory(GsonConverterFactory.create())
    .build()

val apiService = retrofit.create(ApiService::class.java)

try {
    val repos = apiService.listRepos("octocat")
    // 가져온 데이터를 Composable 함수 내에서 처리
} catch (e: Exception) {
    // 오류 처리
}

2. 상태를 관리하는 ViewModel 사용

Jetpack Compose 앱에서는 상태 관리를 위해 ViewModel을 사용할 수 있습니다. 네트워크 통신으로 받은 데이터를 ViewModel 내에서 관리하고, 이를 UI에 표시하는 데 사용할 수 있습니다.

class MyViewModel: ViewModel() {
    private val _repoList = mutableStateOf<List<Repo>>(emptyList())
    val repoList: State<List<Repo>> = _repoList

    // 네트워크 통신 및 데이터 갱신
    suspend fun fetchRepoList() {
        try {
            val repos = apiService.listRepos("octocat")
            _repoList.value = repos
        } catch (e: Exception) {
            // 오류 처리
        }
    }
}

3. Composable 함수에서 데이터 표시

마지막으로, 받아온 데이터를 Composable 함수를 사용하여 UI에 표시합니다.

@Composable
fun RepoListScreen(viewModel: MyViewModel) {
    val repoList by viewModel.repoList.collectAsState()

    // 데이터를 리스트로 표시
}

이제 Jetpack Compose 앱에서 백엔드와의 통신을 처리하기 위한 기본적인 구성을 완료했습니다.

결론

Jetpack Compose를 사용하여 안드로이드 앱을 개발할 때, Retrofit과 ViewModel을 통해 간단하고 효율적으로 백엔드와의 통신을 처리할 수 있습니다. 제공된 예시 코드를 통해 실제 앱에 적용해 보세요!

참고자료: