Retrofit2로 데이터 받아 와서 RecyclerView 만들기

서버에서 Json형태로 된 데이터를 받아와서 RecyclerView를 만들어보았었는데,

3일간 진짜 밥잠똥이거만 했다고 해도 과언이 아닐정도로 끙끙거리며 만들었다.

2년 내내 안드로이드를 얕게 붙잡고 있었던 게 다라서 뭐 하나 할때마다 스무스 하지가 않다.

어쨌든 나같은 사람이 한 명이라도 있다면 도움이 되었으면 하는 바람으로 여기에서 정리를 해보려고 한다.

중간 중간에 문제가 생기기도 했었는데

그때그때 어떻게 해결했는지는 index로 정리해서 다른 포스트에 따로 정리해둘 것이다.

암튼 스따뚜! 

*관련 개념들은 개념편에 정리해둬야징

(개념을 모호하게 알고 있으면 쉽게 까먹으니까 무작정 따라하고 끝내기 보단 개념을 탄탄히 하는 것도 중요한 것 같다.)

1. build.grade (Module : app)에 라이브러리 추가

Gradle Scripts -> build.gradle (Module: app)에 retrofit과 gson converter을 추가해줍니다.

 

dependencies {
    
    ...
 
    // retrofit
    implementation 'com.squareup.retrofit2:retrofit:2.3.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
 
    // recyclerview
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
 
 
}

2. API Client 생성하기

Retrofit을 이용한 REST API 통신을 위해서는

1) Retrofit 객체를 생성해주고 2) REST API 명세에 맞는 Interface를 선언해주어야 합니다.

먼저, Retrofit 객체를 만들기 위한 ApiClient.java 클래스를 만들어봅시다.

 

package com.example.retrofit;
 
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
 
public class ApiClient {
 
    public static String BASE_URL = "http://ec2-15-164-234-43.ap-northeast-2.compute.amazonaws.com/";
 
    private static Retrofit retrofit;
    public static Retrofit getClient(){
 
        if(retrofit == null){
            retrofit = new Retrofit.Builder()
                    .baseUrl(BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
        }
        return retrofit;
    }
}
 

 

static String 값으로 BASE_URL을 정의해주는 데요, "요기 안에 가져올 데이터가 담긴 서버 주소를 쓰시면 됩니다."

여기서 주의할 점은 주소가 반드시 /로 끝나야 합니다.

예를 들어 "http://purple/wood/light"까지만 적는다면

실제로는 "http://purple/wood/"까지만 가져오게 된다는 점 유의해주세요.

이름이 BASE_URL인 만큼 베이스 주소만 적어두시고 나머지 주소는 interface에 써줄 겁니다!

*전체 주소 : http://ec2-15-164-234-43.ap-northeast-2.compute.amazonaws.com/api/restaurant

 

간단히 retrofit 객체 생성에 대한 설명을 적어보자면,

retrofit -> retrofit 객체를 저장할 retrofit 타입의 변수

= new Retrofit.Builder() -> retrofit 객체 생성

.baseUrl(BASE_URL) -> 어떤 서버(BASE_URL)로 네트워크 통신을 할 것인지 설정

.addConverterFactory(GsonConverterFactory.create()) -> 통신 완료 후, 어떤 converter로 데이터를 parsing할 것인지

                                                                                     *앞에서 gson-converter을 사용하려고 미리 gradle에 추가한 것입니다!

.build() -> 통신하여 데이터를 파싱한 retrofit 객체 생성 완료-!

이렇게 되는 것입니다.

3. Data를 받아올 Class 생성하기

제가 가져온 서버의 주소를 들어가보면 데이터가 

 

{"statusCode":200,"serverTime":1583501031307,"body":[{"id":1,"name":"TEST","locLatitude":123.123456,"locLongitude":123.456789,"numOfStar":0,"numOfLike":0},{"id":2,"name":"두번째 데이터","locLatitude":111.054869,"locLongitude":120.3154,"numOfStar":0,"numOfLike":0},{"id":3,"name":"한양대학교 서울캠퍼스","locLatitude":37.557394,"locLongitude":127.045354,"numOfStar":1234,"numOfLike":5678},{"id":4,"name":"탕화쿵푸 마라탕","locLatitude":37.560946,"locLongitude":127.046428,"numOfStar":1000,"numOfLike":2000}]}

 

요렇게 생겼습니다. 간단히 구조를 보면 {"A" : 1, "B" : 2, "C" : [{"a":10, "b":20", "c":30, "d":40}]} 이렇게 생겼어요!

즉, 중괄호 속 대괄호 안에 중괄호가 또 있는 형태입니다.

이렇게 데이터 구조를 정확히 알아야 가져올 때 헤매지 않습니다.

이제 이 데이터를 가져올 클래스를 두 개 만들거에요.

이거 자꾸 깨져서 걍 캡쳐해서 올렸습니다

TestItem은 겉에 싼 중괄호의 데이터 클래스이고 Data는 안에 있는 중괄호의 데이터 클래스에요.

TestItem을 보면 세번째 변수로 List<Data> body;가 있죠.

여기서 Data가 오른쪽 클래스이고, "id, name, locLatitude, locLongitude, numOfStar, numOfLike"가 리스트형태로

TestItem의 body에 하나씩 들어가있다고 생각하시면 이해하기 편합니다.

이제 데이터를 받아올 틀도 준비됐고, Retrofit 객체도 만들었으니 Interface를 생성해야 합니다. 통신을 위해서요!

+) TestItem 클래스에는 toString()메소드도 정의해두었어요! 5번 단계에서 로그를 찍을 때 사용하기 위함입니다.

4. API Interface 생성하기

인터페이스가 뭔가요? 클래스가 구현해야하는 동작을 지정하는 데 사용하는 일종의 추상클래스입니다.

우리가 만들었던 API Client 있죠? 우리는 여기서 서버 주소를 받아오고, 데이터를 파싱하죠.

그러면 서버에서 어떻게 데이터를 요청하고, 어떻게 받을지 인터페이스에 명시에 주어야 합니다.

 

import retrofit2.Call;
import retrofit2.http.GET;
 
public interface ApiInterface {
 
    @GET("api/restaurant")
    Call<TestItem> getData();
 
}

 

위 인터페이스는 REST API 명세에 맞게 작성하여 선언한 것입니다.

Retrofit에서는 REST API 통신에 필요한 Annotation을 만들어 두었습니다.

 

위에서 저는 @GET Anotation을 사용했는데요,

이 경우 HTTP통신에 사용되는 메소드 중 GET 요청을 하겠다는 것을 의미합니다.

@GET외에도 @POST @PUT @DELETE @HEAD 이렇게 총 5개의 Annotation이 있습니다.

Anotation 괄호 안에는 아까 전체 주소에서 BASE_URL 부분을 뺀 나머지 주소를 적어주시면 됩니다.

 

정리하자면, @주석(API URL)형태를 통해서 실질적으로 어떤 API 주소에서 어떤 메소드를 요청할 것인지 명시하는 것입니다. 우리는 데이터를 GET하기 위해 GET anotation을 쓴 것이구요.

 

이제 서버에 통신 메소드를 가지고 GET요청을 했고, 이제 받은 데이터를 어떤 형태로 담아둘 것인지 명시해주어야겠죠.

위에 우리는 이미 데이터를 어떤 클래스에 담을 건지 미리 데이터 형태를 보고 지정을 해놓았으니

큰 그릇인 TestItem에 담기로 합시다.

Call<형태> getData(); 이렇게 써주면 <형태>에 맞게 데이터를 담아서 getData()메소드를 이용해 데이터를 가져다 쓰면됩니다.

5. MainActivity.class에 통신해서 데이터를 받아올 수 있도록 세팅해주기

자, 이제 통신을 위한 준비를 마쳤으면 가져온 데이터를 요리조리 사용할 수 있도록 해주어야 합니다.

실제로 Interface와 Retrofit 객체를 이용하여 HTTP 통신을 요청하고 결과를 받는 것이지요.

일단, MainActivity에 세팅을 하면서 TestItem 객체를 만들고 데이터가 잘 받아오는 지 확인을 해보려고 해요.

 

public class MainActivity extends AppCompatActivity {
 
    TestItem dataList;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        ApiInterface apiInterface = ApiClient.getClient().create(ApiInterface.class);
 
        Call<TestItem> call = apiInterface.getData();
 
        call.enqueue(new Callback<TestItem>() {
 
            @Override
            public void onResponse(Call<TestItem> call, Response<TestItem> response) {
 
                dataList = response.body();
 
                Log.d("MainActivity", dataList.toString());
            }
 
            @Override
            public void onFailure(Call<TestItem> call, Throwable t) {
 
                Log.d("MainActivity", t.toString());
            }
        });
    }
}

 

Line 3 : 우선 데이터를 담을 TestItem 하나를 만들어줍니다. 전 변수명을 dataList로 지었어요.

Line 10 : 위에서 정의해둔 Interface를 바탕으로 실제로 사용할 클라이언트 객체를 생성해줍니다.

Line 12 : 통신 후 응답을 받을 Callback을 구현해줍니다. Interface에 명시한 Call하고 같죠?

            TestItem형태로 응답을 받을 친구를 call이라고 명명해주고 apiInterface.getData()로 응답을 받습니다.

Line 14 : Client 객체가 제공하는 enqueue 함수를 통해 통신에 대한 요청 및 응답처리 방법을 명시합니다.

            성공할 경우에는 onResponse로 들어가고, 실패할 경우에는 onFailure로 들어갑니다.

            각각의 경우에 Log에 Log.d()괄호 안에 내용이 출력될 것입니다.

Line 19 : dataList에 response.body();를 통해 Call(요청)에 대한 Response(응답)결과를 저장합니다.

Line 20 : Log.d에서 dataList.toString()으로 결과를 출력하게 되겠죠?

 

맨 밑줄을 보시면 됩니다!

6. RecyclerView로 데이터 띄우기

6-1. RecyclerView 레이아웃 만들기

RecyclerView로 데이터를 띄우려면 RecyclerView를 만들어주어야겠죠?

먼저 레이아웃 두 개를 만들겁니다. Recycler하게 목록을 띄울 화면 레이아웃과

목록 하나하나, 즉 View 행 하나의 레이아웃을 만들겁니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
</androidx.constraintlayout.widget.ConstraintLayout>

위 코드는 리사이클뷰가 올라갈 화면입니다. 레이아웃 id는 recyclerView로 지정해주었어요.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
 
    <TextView
        android:id="@+id/dataName"
        android:layout_width="0dp"
        android:layout_weight="4"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_margin="10dp"
        android:textAlignment="center"
        android:text="restaurant"/>
 
</LinearLayout>

이거는 행 하나의 레이아웃이에요. android:layout_weight가 있는 걸 보면 감이 오시다시피 아래 코드가 너무 길어서 줄였는데, 저는 4:1:1비율로 첫 칸에는 name, 두번째칸에는 numOfStar, 세번째칸에는 numOfLike를 넣기 위해 TextView를 배치해주었습니다.

 

요런식으로 나오게 하기 위해서요!

6-2. RecyclerView Adapter 만들기

RecyclerView는 ListView와 다르게 한 화면에 표시하기 힘든 다수의 데이터를 스크롤이 가능한 list로 view를 재활용해 표시해주는 위젯입니다. 그래서 그 틀을 재활용하기 위해 Adapter로 itemView를 만들어내서 사용하죠.

아래에 보여드리는 코드를 하나씩 뜯어서 자세히 역할 설명을 하는 것은 RecyclerView 전용 포스트에서 설명하도록 하기로 하고 우선은 요기에 집중을 해봅시다.

 

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder>{
 
    private Context c;
    private List<Data> dataList;
 
    public RecyclerAdapter(Context c, List<Data> dataList) {
        this.c = c;
        this.dataList = dataList;
    }
 
    @NonNull
    @Override
    public RecyclerAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
 
        View view = LayoutInflater.from(c).inflate(R.layout.row_view, parent, false);
        return new MyViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull RecyclerAdapter.MyViewHolder holder, int position) {
 
        holder.name.setText(dataList.get(position).getName());
        holder.numOfStar.setText("" + dataList.get(position).getNumOfStar());
        holder.numOfLike.setText("" + dataList.get(position).getNumOfLike());
 
    }
 
    @Override
    public int getItemCount() {
        return dataList.size();
    }
 
    public class MyViewHolder extends RecyclerView.ViewHolder {
 
        TextView name;
        TextView numOfStar;
        TextView numOfLike;
 
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
 
            name = (TextView)itemView.findViewById(R.id.dataName);
            numOfStar = (TextView)itemView.findViewById(R.id.dataNumOfStar);
            numOfLike = (TextView)itemView.findViewById(R.id.dataNumOfLike);
 
        }
    }
}

저는 위 데이터에서 id, locLatitude, locLongitude를 빼고 name이랑 numOfStar, numOfLike만 받아서 띄우고 싶었기 때문에 Adapter를 만들때 아예 itemView에 이 세 가지만 넣어주었습니다.

RecyclerView를 위한 Adapter는 이런 형태인데 처음에 RecyclerView를 만들 땐 Holder 클래스를 따로 만들었었는데 같이 만드는 게 더 편한 것 같습니다. Holder는 레이아웃과 연결해서 itemView를 만들어주는 역할을 해요. (단순 연결)

Adapter에서는 Holder에서 만들어준 itemView를 inflater을 이용해 객체화 시키고, 실제 데이터를 담아줍니다.

다시 말해, Holder로 itemView그릇을 만들면 Adapter가 실제 데이터를 담은 itemView로 만들어주는 거죠!

그 과정에서 inflater는 xml을 객체화시키는 걸 돕고, layoutManager은 recyclerview에 차례차례 띄우는 걸 도와줍니다.

6-3. RecyclerView 사용하기

이제 RecyclerView를 사용하기 위한 만반의 준비를 끝냈으니, MainActivity로 돌아가서 쓰면 됩니다!

 

public class MainActivity extends AppCompatActivity {
 
    TestItem dataList;
    List<Data> dataInfo;
 
    RecyclerView recyclerView;
    RecyclerAdapter recyclerAdapter;

우선 MainAcitivity 안에 이렇게 RecyclerView와 Adapter 객체를 만들어줍니다.

 

앗! List<Data> dataInfo;가 추가된 게 보이시나요? 기존의 TestItem dataList; 아래에요!

저는 이거 할 때 중괄호 속 중괄호 안에 있는 데이터들 중 몇 개를 골라서 사용하고 싶은데, 

이걸 어떻게 해야하나 하면서 정말 헤맸었어요.

기초가 부족한 탓인지, 기초적인 걸 사용하는 게 익숙하지 않은 탓인지 많이 헤맸었는데

어쨌든 방법을 찾았으니 공유해보고자 합니다.

중괄호 속 중괄호 내용들을 담을 클래스를 Data.class로 만들어줬었죠? 그걸 리스트로 가져오기 위해

저렇게 dataInfo라는 이름의 객체를 만들어줬어요!

 

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        dataInfo = new ArrayList<>();
        recyclerView = findViewById(R.id.recyclerView);
 
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
 
        ApiInterface apiInterface = ApiClient.getClient().create(ApiInterface.class);
 
        Call<TestItem> call = apiInterface.getData();
 
        call.enqueue(new Callback<TestItem>() {
            @Override
            public void onResponse(Call<TestItem> call, Response<TestItem> response) {
 
                dataList = response.body();
 
                Log.d("MainActivity", dataList.toString());
 
                dataInfo = dataList.body;
 
                recyclerAdapter = new RecyclerAdapter(getApplicationContext(), dataInfo);
                recyclerView.setAdapter(recyclerAdapter);
 
            }

 

onCreate안에서 본격적으로 RecyclerView에 띄울 준비를 할 거에요.

Line 6 : dataInfo라는 변수로 새로운 ArrayList<>를 정의해줍니다.

 

Line 9&10 : 그리고 앞서 설명드린 LayoutManager을 이용하여 RecyclerView를 세팅해줍니다.

Line 24 : Call(요청)에 대한 Response(응답)를 dataList라는 TestItem형태의 객체에 담았잖아요?

            그러면 그 dataList에 담긴 body part, 즉 List<Data>를 뽑아오기 위해 dataInfo = dataList.body;를 해줍니다.

            *여기서 response.body()에서의 body()함수와 body를 헷갈리면 안되요!

             후자의 body는 제가 받아오는 데이터 내에서의 변수명입니다!! ㅠ ㅅ ㅠ

 

Line 26 : 이제 Adapter를 이용해서 dataInfo에 있는 내용을 가져와서 지정해둔 itemView 형식에 맞게 띄우게 될 겁니다!

 

 

쨔짠!!

위에서 봤던 데이터를 다시 보여드리자면

 

{"statusCode":200,"serverTime":1583501031307,"body":[{"id":1,"name":"TEST","locLatitude":123.123456,"locLongitude":123.456789,"numOfStar":0,"numOfLike":0},{"id":2,"name":"두번째 데이터","locLatitude":111.054869,"locLongitude":120.3154,"numOfStar":0,"numOfLike":0},{"id":3,"name":"한양대학교 서울캠퍼스","locLatitude":37.557394,"locLongitude":127.045354,"numOfStar":1234,"numOfLike":5678},{"id":4,"name":"탕화쿵푸 마라탕","locLatitude":37.560946,"locLongitude":127.046428,"numOfStar":1000,"numOfLike":2000}]}

 

이렇게 생겨먹은 데이터였죠? 여기서 name, numOfStar, numOfLike부분만 가져온 거에요!

쌩초보가 하기에 3일 간 어려움이 많았지만 완성하고 나니 뿌듯했었어요.

우연히 블로그를 발견한 누군가가 작은 도움이나마 되었으면 좋겠네요.

어쩌다보니 구어체가 되었는데, 쨋든 끝!!