React Native API 연동 기초: fetch와 axios 사용법 정리

네비게이션까지 만들었다면
이제 앱의 형태는 거의 갖춰졌다.

다음 단계는
“실제 데이터”를 붙이는 것이다.

• 서버에서 목록 가져오기
• 상세 정보 요청
• 로딩 처리
• 에러 처리

React Native에서 API 연동은
웹과 크게 다르지 않지만,
처음에는 몇 가지 포인트에서 헷갈린다.

이 글에서는
fetch와 axios를 기준으로 API 연동의 기본 흐름을
입문자 + 실무 기준으로 정리한다.

---

이 글이 필요한 사람

• 서버 데이터를 화면에 띄우고 싶은 경우
• fetch와 axios 중 뭘 써야 할지 고민되는 경우
• API 호출 위치와 타이밍이 헷갈리는 경우

---

React Native에서 API 연동 흐름

전체 흐름을 먼저 보면 이렇다.

1. 화면 진입
2. API 요청
3. 로딩 상태 표시
4. 데이터 성공/실패 처리
5. 화면 렌더링

이 흐름은
React Native든 웹이든 거의 동일하다.

[이미지: React Native API 연동 전체 흐름]

---

fetch란 무엇인가

fetch는
JavaScript에 기본으로 내장된 API 요청 함수다.

React Native에서도
별도 설치 없이 바로 사용할 수 있다.

fetch('https://example.com/data')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

fetch의 특징

• 추가 설치 필요 없음
• 브라우저 / React Native 공통 사용 가능
• 문법이 다소 장황함

간단한 테스트나 예제에서는
fetch만으로도 충분하다.

---

axios란 무엇인가

axios는
실무에서 많이 쓰이는 HTTP 클라이언트 라이브러리다.

npm install axios

import axios from 'axios';

axios.get('https://example.com/data')
  .then((response) => {
    console.log(response.data);
  });

axios의 특징

• 응답 데이터 접근이 간단함
• 요청/응답 인터셉터 지원
• 에러 처리 구조가 명확함

실무에서는
axios를 선호하는 경우가 많다.

---

fetch vs axios, 무엇을 쓸까

정리하면 이렇게 생각하면 된다.

항목fetchaxios

설치	필요 없음	필요
문법	비교적 복잡	간결
실무 활용	낮음	높음
확장성	제한적	좋음

입문 단계에서는 fetch
실무를 염두에 두면 axios

이 블로그에서는
이후 예제부터는 axios 기준으로 설명한다.

---

useEffect에서 API 호출하기 (중요)

API 요청은
보통 화면이 처음 열릴 때 실행한다.

그래서 useEffect를 사용한다.

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://example.com/data')
      .then((response) => {
        setData(response.data);
      });
  }, []);

  return null;
}

여기서 중요한 포인트는 두 가지다.

• [] → 최초 1회만 실행
• 응답 데이터를 state에 저장

---

로딩 상태 처리하기

API는
항상 바로 응답하지 않는다.

그래서 로딩 상태를 분리해야 한다.

const [loading, setLoading] = useState(true);

useEffect(() => {
  axios.get(url)
    .then((response) => {
      setData(response.data);
    })
    .finally(() => {
      setLoading(false);
    });
}, []);

if (loading) {
  return <Text>로딩 중...</Text>;
}

이 패턴은
거의 모든 API 화면에서 반복된다.

---

에러 처리 기본 패턴

const [error, setError] = useState(null);

axios.get(url)
  .then((response) => {
    setData(response.data);
  })
  .catch((err) => {
    setError(err);
  });

if (error) {
  return <Text>문제가 발생했습니다.</Text>;
}

에러 처리를 안 하면
앱이 조용히 멈춘 것처럼 보일 수 있다.

---

API 데이터 + FlatList 연결하기

API 연동의 가장 흔한 결과는
리스트 화면이다.

<FlatList
  data={data}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <Text>{item.title}</Text>
  )}
/>

• API 데이터 → state
• state → FlatList
• 이 흐름이 기본이다

---

실무에서 자주 겪는 문제

• API가 여러 번 호출됨 → useEffect 의존성 문제
• 화면 전환 시 에러 발생 → 언마운트 처리 안 함
• 데이터 구조가 예상과 다름 → console.log로 먼저 확인

API 연동이 안 될 때는
네트워크보다 코드 흐름을 먼저 의심하는 게 좋다.

---

정리

• React Native API 연동은 웹과 유사하다
• fetch는 기본, axios는 실무용
• API 호출은 useEffect에서 처리한다
• 로딩과 에러 상태는 반드시 분리한다

다음 글에서는
전역 상태 관리의 필요성과 함께
useContext부터 가볍게 정리해보고,
언제 상태 관리 라이브러리가 필요한지도 다뤄볼 예정이다.