🔄 36. React Native에서 API 연결하기 — fetch, useEffect, FlatList 기초

---

React Native 앱을 만들다 보면
서버에서 데이터를 가져와 화면에 뿌려야 하는 상황이 정말 많다.
그럴 때 필요한 기본 흐름은 다음과 같다:

1. API 요청 (fetch, axios 등)
2. 상태 관리 (useState, useEffect)
3. 리스트 렌더링 (FlatList)

이번 글에서는 위 3가지 요소를 활용해서
"뉴스 리스트를 불러오는 예제"를 통해 실전처럼 정리해봤다.

---

📦 사용할 도구들

import { useEffect, useState } from 'react';
import { FlatList, View, Text, ActivityIndicator } from 'react-native';

• useEffect: 컴포넌트가 처음 렌더링될 때 API 요청
• useState: 로딩 상태, 데이터 상태 저장
• FlatList: 리스트 렌더링 최적화 컴포넌트

---

✅ 기본 API 호출 예제

function NewsList() {
  const [articles, setArticles] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('https://example.com/api/news')
      .then(res => res.json())
      .then(data => {
        setArticles(data.articles);
        setIsLoading(false);
      })
      .catch(err => {
        console.error(err);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <FlatList
      data={articles}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 12 }}>
          <Text style={{ fontSize: 16 }}>{item.title}</Text>
        </View>
      )}
    />
  );
}

---

🧠 FlatList가 필요한 이유

• ScrollView는 모든 데이터를 한 번에 렌더링
• FlatList는 화면에 보이는 데이터만 렌더링해서 성능이 훨씬 좋음
• 필수 속성: data, renderItem, keyExtractor

---

💡 실전 팁

항목	내용
ActivityIndicator	로딩 상태 처리에 유용
error state 추가	서버 오류, 네트워크 문제 시 처리
useCallback 사용	리렌더링 성능 최적화
axios	fetch보다 오류 처리, 인터셉터 등 편리함

---

⚠️ API 호출 위치 주의

• useEffect(() => {...}, []) 안에만 호출
  → 컴포넌트가 마운트 될 때 한 번만 실행됨
• 의존성 배열에 [] 넣는 걸 잊지 말기!

---

📝 내가 느낀 점

웹에서는 fetch, React Query 등 다양한 방식으로 데이터 패칭을 해봤지만,
React Native에선 FlatList라는 구조 덕분에
렌더링 성능을 신경 써야 한다는 걸 처음 느꼈다.

지금은 상태는 useState, 데이터는 FlatList,
비동기는 useEffect로 깔끔하게 정리하는 걸 기본 흐름으로 삼고 있다.

---

🔄 “모바일에서 데이터 패칭은 단순히 불러오는 게 아니라, 효율적으로 보여주는 기술이다.”

---