[React Native] axios.create 인스턴스 생성 및 .get 방식 구현

 Restful API 는 내가 개발이 재미있다고 느낀 첫 번째 관문이다. 화면 상에 시각적 요소들을 배치하는 것도 중요한 장치이지만 눈에 보이지 않는 서버 자원들을 화면으로 옮겨담는 것은 굉장히 흥미로운 일이라고 생각한다.

 Swift의 Alamofire 라이브러리로 API의 개념을 처음 공부했을 때에는 그 개념을 이해하는 데에만 며칠이 걸렸던 것 같다. 문장을 읽어도 '이게 무슨 말이지?' 싶었고 API 개념, 구현뿐만 아니라 generic type과 @escaping, closure, json parsing, codable & decodable, 비동기(DispatchQueue.main.async), 싱글톤과 같이 얽히면서 서로 구현에 들어가는 것들에 대한 공부도 필요했다.

 그 결과,  짧은 개발 독학 중에서 실제 구현해본 것은 .get 과 .post 이며, 홈뷰에서 Swift-Alamofire를 통해 구현했던 순서는 다음과 같다.

Xcode ~ APIManager - getData()

• 홈뷰가 나타나기 전(viewWillAppear)에서 HomeView에 뿌려질 데이터를 가져온다.
• 데이터는 manager 라는 싱글톤으로 구현된 클래스에서 가져오며, 그 안에서 getData() 함수가 전달된다.
• getData()는 추후 다수의 model 형태의 데이터를 위해 제네릭 타입으로 선언된다.
• 요청은 url, method, params를 담고 있으며 statusCode가 주어진 범위에 속할 때 json 형태로 값을 받아온다.
• 받아온 response는 switch문을 통해 성공 시 비동기적으로 model 형태로 리턴되며, 실패시 에러를 출력하고 nil값을 리턴한다.

 

RN에서는 Fetch, Ajax, Axios 를 주로 쓴다고 하는데 장단점 비교 후 Axios를 선택했다.(비교에 대한 게시글을 추후에..) 

Axios 모듈화

 서버로부터 요청을 보낼 일은 갈수록 많아질 것이기 때문에 모듈화는 필수적이다. 스터디 결과, 필요시 Axios 라이브러리로부터 하나씩 설계하는 것보다 이미 설계된 모듈만 가져와서 method, path, param를 넣어주는 것이 효율적이다.(개별 폴더 안에 client 함수별로 묶어서 처리하면 더 효율적일까?) 따라서, apis라는 폴더를 만들어주고 하위폴더로 data Type를 담을 model 폴더와 manager 역할을 해줄 client 폴더를 생성했으며, axios.create를 사용하여 axios 인스턴스를 만들었다.

app/apis/model/data.tsx

app/apis/service/client.tsx

 생성된 apiClient 내부에는 추후 넣어줄 토큰을 포함시킬 헤더와 baseUrl, param 등이 담길 예정이다.

app/screens/Home/homeView.tsx

위에 선언된 apiClient를 가져와서 홈뷰가 보여지기 전에 받아올 것이기 때문에 swift 상에서 viewWillAppear를 담당하는 useEffect 내부에서 구현한다. 형태는 get으로 가져오고 담아줄 Type형은 Photo이기 때문에 <Photo[]>로 선언 후, setPost를 통해 저장된다. 

최종적으로 posts에 저장된 데이터는 return 내부에서 FlatList 의 data로 들어가 화면에 뿌려지게 된다.

app/components/PostCard.tsx

props인 item을 통해 들어온 data는 필요한 데이터 네이밍에 따라 분류되어 UI를 구성한다.

결과물!

추후 보완점

• useEffect 쓰임에 따른 라이프사이클 스터디 정리
•  post 구현
•  client.tsx 상에서 외부 파일(ex: config.ts)을 통해 url이나 token 가져오는 것(추가 모듈화)

 

▼ 포스팅 정리된 글 ▼

[ReactNative] Axios로 게시물 Post하기