compose
compose 는 Compose for Desktop, Compose for Web 으로 적용해서 사용할 수 있어서 범용성이 아주 높은 UI 레이아웃 프레임 워크 입니다.
통신을 하는 데에 있어서 일반 JAVA에서 사용하는 restful api 라이브러리를 전부 사용할 수 있습니다. 저는 지금 android 환경에서 retrofit을 적용하는 방법을 작성 하려고 합니다.
retrofit2
HTTP 통신 개괄 부터 진행해야 할 것 같지만 어쨌든 compose에 네트워크 통신을 더해주기 위해서 retrofit2를 도입해봅니다.
retrofit 말고도 okhttp를 도입하시거나 jetbrain 에서 만들어둔 ktor를 사용해도 됩니다. 그외에도 아마 많아졌을듯 싶지만 저도 현재 프로젝트 언어가 kotlin 인 이상 ktor를 사용하게 될것 같긴 합니다.
Libary
공식 웹사이트에도 잘 나와 있긴하지만 저는 convertor 로 gson 을 선택했으며 버전은 가장 최신 버전으로 심어주겠습니다.
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.5.0'Manifest
네트워크를 사용하기 위해 manifest에 적용해줍니다.
<uses-permission android:name="android.permission.INTERNET"/>Inteface
통신하기 위해 인터페이스를 생성해주는 방법은 기존의 retrofit사이트에 있는 것과 동일합니다. ListModel 같은 모델의 내용은 중요한 부분은 아니라 생략하겠습니다. 데이터 를 받을 JSON 값에 따라 달라지게 되기 때문입니다.
package com.example.newcanaryproject
import retrofit2.Call
import retrofit2.http.GET
interface RetrofitAPI {
// as we are making get request so we are displaying
// GET as annotation.
// and inside we are passing last parameter for our url.
@GET("T7R2")
fun
// as we are calling data from array so we are calling
// it with array list and naming that method as getAllCourses();
getLanguages(): Call<ArrayList<ListModal>>
}Converting
실제로 통신이 되는 부분은 코드 상에서 바로 이부분입니다.
fun getJSONData(courseList: MutableList<String>, ctx: Context) {
val retrofit = Retrofit.Builder()
.baseUrl("https://jsonkeeper.com/b/")
.addConverterFactory(GsonConverterFactory.create())
.build()
val retrofitAPI = retrofit.create(RetrofitAPI::class.java)
val call: Call<ArrayList<ListModal>> = retrofitAPI.getLanguages()
call!!.enqueue(object : Callback<ArrayList<ListModal>?> {
override fun onResponse(
call: Call<ArrayList<ListModal>?>,
response: Response<ArrayList<ListModal>?>
) {
if (response.isSuccessful) {
var lst: ArrayList<ListModal> = ArrayList()
lst = response.body()!!
for (i in 0 until lst.size) {
courseList.add(lst.get(i).languageName)
}
}
}
override fun onFailure(call: Call<ArrayList<ListModal>?>, t: Throwable) {
..
}
})
}enqueue에서 override 하는 onResponse, onFailure을 적절히 사용하면 되는데요
저희는 compose에서 mutableStateList를 remember 할것이기 때문에 courseList에 전부 데이터를 갱신해주는 것입니다. 프로세스가 변경될때마다 조회해 줄 것이기 때문에요
Use
val courseList = remember { mutableStateListOf<String>() }
getJSONData(courseList, context)사용하실때는 이런식으로 미리 데이터를 선언해두고 compose의 값이 갱신될 수 있게 converting 과정을 거친 후 courseList 값을 사용하시면 됩니다
LazyColumn {
items(courseList) { language ->
Text(language, modifier = Modifier.padding(15.dp))
Divider()
}Reference
