검색
검색
공개 노트 검색
회원가입로그인
리액트 네이티브 활용의 모든 것

7장: 네트워킹 및 데이터 처리 (API, AsyncStorage)

네트워킹과 데이터 저장: 리액트 네이티브의 데이터 처리 핵심

모바일 앱의 실질적인 가치는 외부 서버와의 원활한 소통에 달려 있다. 리액트 네이티브에서는 데이터를 주고받고, 로컬에 안전하게 보관하는 일이 앱 경험의 중심이 된다. 이 장에서는 API를 통한 네트워킹과 기기 내부 데이터 저장 방식을 실전적으로 다룬다.

네트워크 통신의 기본: Fetch와 Axios

서버에서 정보를 불러오거나 사용자 입력을 전송하려면 HTTP 요청이 필요하다. 리액트 네이티브는 자바스크립트에서 익숙한 Fetch API를 내장하며, 대부분의 RESTful API와 간단하게 연동할 수 있다. 예를 들어 fetch('https://api.example.com/posts')처럼 간단히 작성하여 데이터를 받아올 수 있다. 필요에 따라 POST, PUT, DELETE 등 다양한 HTTP 메소드를 직접 지정할 수 있어 활용도가 높다.

더 나아가, Axios와 같은 외부 라이브러리를 도입하면 더욱 직관적이고 강력한 네트워크 처리가 가능하다. Axios는 Promise 기반으로 동작해 데이터 처리의 흐름을 깔끔하게 유지할 수 있을 뿐 아니라, 자동으로 JSON 변환과 에러 핸들링, 응답 시간 설정 등 실전적인 기능을 기본으로 제공한다. 수많은 리액트 네이티브 프로젝트에서 Axios가 채택되는 이유다.

네트워크 통신 시에는 네트워크 상태(NetInfo) 체크도 빼놓을 수 없다. 모바일 환경은 언제든 연결이 불안정해질 수 있으니, 요청 전후로 연결 상태를 점검하고 사용자에게 명확하게 안내하는 UX가 중요하다.

데이터 영속성을 위해: AsyncStorage 활용하기

기기의 로컬 저장소에 데이터를 남기는 일은 등록 정보, 토큰, 임시 캐시 등 심플한 데이터 유지에 필수적이다. 리액트 네이티브에서는 AsyncStorage를 통해 이를 쉽게 구현한다. AsyncStorage는 key-value 구조로 문자열 데이터를 비동기적으로 저장·읽어오며, 안드로이드와 iOS 모두에 동일하게 적용된다. 앱을 재시작해도 값이 유지된다는 점이 핵심이다.

활용법은 단순하다. 저장할 때는 setItem, 읽을 때는 getItem을 사용하며, 항상 await 혹은 then 구문을 통해 비동기 처리를 고려해야 한다. 값이 객체라면 JSON.stringify, JSON.parse를 반드시 함께 사용해야 한다는 점도 잊지 말아야 한다.

단, 대량의 데이터나 복잡한 데이터 관리를 위해서는 AsyncStorage 위에 별도의 저장 관리 도구를 덧씌워 사용하는 것이 안정적이다. 또한, 민감 정보 저장에는 별도의 보안 솔루션이 권장된다.

데이터 흐름의 실제: 통신과 저장의 조화

실전 앱에서는 서버에서 받아온 데이터를 AsyncStorage에 로컬 캐싱하거나, 저장된 인증 토큰을 네트워크 요청 헤더에 첨부하는 식의 유기적 연계가 자주 필요하다. 네트워크 요청과 데이터 저장, 그리고 상태 관리 도구(Redux, Context 등)를 함께 조합한다면, 확장성과 안정성이 뛰어난 모바일 앱 데이터 레이어를 구축할 수 있다.

이처럼 리액트 네이티브의 네트워킹과 데이터 관리는 단순 API 사용법을 넘어서, 앱 구조 설계 전체와 맞닿아 있다. 올바른 데이터 흐름 설계를 통해 사용자 경험, 확장성, 유지보수를 한 번에 잡을 수 있다.


공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기