React Native 4단계: API 연동과 상태 관리 확장

[4단계] API 연동과 상태 관리 확장

1. fetch, axios로 외부 API 호출

fetch 기본 예시

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => setPosts(data));
}, []);

axios로 더 간단하게

npm install axios

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(res => setPosts(res.data));

실무에선 axios가 응답 처리, 에러 처리, interceptor 등에서 더 편리하다

2. 리스트 출력: FlatList 사용

import { FlatList, Text } from 'react-native';

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

FlatList는 map()보다 성능 좋음 (가상 스크롤)
반드시 keyExtractor로 고유한 키를 지정

3. Context API or Zustand로 전역 상태 관리

Context API 예시

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: 'H.Y' }}>
      <Main />
    </UserContext.Provider>
  );
}

const { name } = useContext(UserContext);

Zustand (간단 전역 상태 관리)

npm install zustand

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

const { count, increment } = useStore();

Redux보다 코드가 훨씬 짧고 간단하다

4. 로딩, 에러 처리 기본 구조

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

useEffect(() => {
  axios.get('/api')
    .then(res => setData(res.data))
    .catch(err => setError(err.message))
    .finally(() => setLoading(false));
}, []);

사용자 경험을 위해 로딩 UI (ActivityIndicator)는 필수

5. Skeleton UI와 캐싱 (선택)

로딩 중일 때 "흰 화면"이 아니라, 유사한 뼈대 UI를 보여주는 게 좋음
FlatList에서 기본 placeholder 구성하거나 react-native-skeleton-placeholder 사용

요약

fetch/axios로 외부 API 연결 가능, 실무는 axios 추천
FlatList로 리스트를 빠르게 렌더링
상태는 Context나 Zustand로 관리, 필요한 수준에 맞게 선택
에러/로딩 처리는 기본, UX의 시작점

심화학습

Q1. FlatList와 ScrollView의 차이는 뭐고, 언제 어떤 걸 써야 하나요?
A1. ScrollView는 모든 항목을 한 번에 렌더링해서 성능 이슈 있음. FlatList는 보이는 항목만 렌더링해서 메모리 절약과 성능이 우수. 긴 리스트는 반드시 FlatList 사용.

Q2. 상태관리에 Redux 대신 Zustand를 써도 되나요? 실무에서 괜찮나요?
A2. 중소 규모 앱에선 충분히 실무 가능. 코드가 짧고 hooks 기반이어서 매우 빠르게 쓸 수 있음. 대규모 앱에서는 상태 추적, 디버깅 편의성 때문에 Redux를 선호하기도 한다.

Q3. API 요청 시 캐싱이나 재사용이 필요한 경우 어떤 걸 고려해야 하나요?
A3. 상태를 유지하거나, 동일한 데이터를 여러 컴포넌트에서 공유하려면 Zustand, React Query, 혹은 SWR 같은 라이브러리를 쓰면 캐싱과 갱신, 실패 재시도 등을 자동으로 처리해준다.