지난 두 글에서 Room과 DataStore로 로컬에 저장하는 걸 봤다. 이번엔 반대로, 서버에 있는 데이터를 가져와보자. 테스트용 공개 API인 JSONPlaceholder의 /todos를 쓴다. 공교롭게도 우리 앱이랑 모양이 똑같은 할 일 목록을 돌려준다. 이걸 받아와서 "추천 할 일 가져오기" 버튼으로 내 목록에 추가해보자.

의존성 추가

// app/build.gradle.kts
dependencies {
    implementation("com.squareup.retrofit2:retrofit:2.11.0")
    implementation("com.squareup.retrofit2:converter-gson:2.11.0")
}

서버가 주는 데이터 모양 정의하기

data class RemoteTodo(
    val id: Int,
    val title: String,
    val completed: Boolean
)

주의할 점이 있다. 이 RemoteTodo는 우리 Room의 Todo 엔티티랑 비슷하게 생겼지만 같은 클래스가 아니다. 서버가 주는 JSON 모양과 우리 DB 테이블 모양은 우연히 닮았을 뿐, 서버 쪽 필드가 바뀌어도 우리 DB 구조는 영향받지 않아야 한다. 그래서 따로 둔다.

API 인터페이스 정의

import retrofit2.http.GET

interface TodoApiService {
    @GET("todos")
    suspend fun getTodos(): List<RemoteTodo>
}

함수 본문이 없다. @GET("todos")만 붙이면, Retrofit이 이 함수가 호출될 때 실제 HTTP GET 요청을 보내고, 돌아온 JSON을 List<RemoteTodo>로 변환해서 돌려주는 코드를 자동으로 만들어준다. suspend로 선언했으니, 이 함수는 코루틴 안에서만 호출할 수 있고, 네트워크 응답이 오기 전까지 호출한 쪽을 기다리게(블로킹 없이) 만든다.

Retrofit 인스턴스 만들기

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

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

val todoApiService = retrofit.create(TodoApiService::class.java)

baseUrl에 공통 주소를 적어두면, @GET("todos")는 그 뒤에 "todos"만 붙여서 요청한다. GsonConverterFactory는 서버가 보낸 JSON 문자열을 RemoteTodo 객체로(또는 반대로) 바꿔주는 역할이다.

ViewModel에서 호출하기 - 로딩/에러 상태 추가

data class TodoUiState(
    val todoList: List<Todo> = emptyList(),
    val isLoading: Boolean = false,
    val errorMessage: String? = null
)

fun importFromServer() {
    viewModelScope.launch {
        _uiState.value = _uiState.value.copy(isLoading = true, errorMessage = null)
        try {
            val remoteTodos = todoApiService.getTodos().take(5)
            remoteTodos.forEach { remote ->
                dao.insert(Todo(title = remote.title, isDone = remote.completed))
            }
            _uiState.value = _uiState.value.copy(isLoading = false)
        } catch (e: Exception) {
            _uiState.value = _uiState.value.copy(
                isLoading = false,
                errorMessage = "할 일을 가져오지 못했다: ${e.message}"
            )
        }
    }
}

[이미지: "추천 할 일 가져오기" 버튼을 누른 뒤 로딩 표시가 뜨고, 잠시 뒤 서버에서 받은 할 일 5개가 목록에 추가된 화면]

네트워크 요청은 실패할 수 있다. 와이파이가 끊겼거나, 서버가 응답을 안 하거나, 타임아웃이 날 수도 있다. 그래서 try/catch로 감싸고, 실패하면 errorMessage에 에러를 담아서 UiState에 반영한다. isLoading은 요청을 시작할 때 true로, 성공하든 실패하든 끝나면 false로 되돌린다.

화면에서는 상태를 보고 다르게 그린다

if (uiState.isLoading) {
    CircularProgressIndicator()
}
uiState.errorMessage?.let { message ->
    Text(text = message, color = MaterialTheme.colorScheme.error)
}
Button(onClick = { viewModel.importFromServer() }) {
    Text("추천 할 일 가져오기")
}

UiState 안에 isLoading, errorMessage를 넣어두면, 화면은 "지금 로딩 중인가", "에러가 있나"를 그냥 값으로 읽고 그에 맞게 그리기만 하면 된다. 로딩바를 언제 띄우고 지울지를 화면이 직접 신경 쓰지 않는다.

정리

• @GET 같은 애노테이션만 붙인 인터페이스를 선언하면, Retrofit이 실제 네트워크 호출 코드를 대신 만들어준다
• 서버 데이터 모양(RemoteTodo)과 내 DB 엔티티(Todo)는 닮았어도 같은 클래스로 두지 않는다
• 네트워크 요청의 로딩/실패도 UiState의 필드(isLoading, errorMessage)로 표현하면, 화면은 그 값만 보고 그리면 된다

다음 글에서는 지금 TodoViewModel 안에 직접 만들어둔 Room, Retrofit, DataStore 인스턴스들을 Hilt로 주입받는 구조로 정리해보겠다.