React Native에서 로딩 상태와 에러 상태 구현하기

React Native 앱 개발 시 데이터 로딩이나 네트워크 요청과 같은 상황에서는 유저에게 로딩 상태를 명확하게 보여주는 것이 중요합니다. 또한, 에러가 발생했을 때도 사용자가 현재 어떤 문제가 있는지 이해할 수 있도록 적절한 피드백을 제공해야 합니다. 이번 포스팅에서는 로딩 상태와 에러 상태를 구현하는 방법을 코드레벨에서 상세히 설명하겠습니다.

1. 기본 로딩 상태 구현하기

React Native에서 데이터를 로드하는 동안 로딩 스피너를 보여주기 위해 흔히 사용하는 접근법을 알아보겠습니다. 예제에서는 React Hook을 사용해 간단한 API 호출에 대한 로딩 상태를 구현하겠습니다.

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

const DataFetchingScreen = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 데이터 불러오기 함수 정의
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('네트워크 응답에 문제가 있습니다.');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    // 로딩 중일 때 로딩 스피너 보여주기
    return (
        데이터를 불러오는 중입니다...
    );
  }

  if (error) {
    // 에러가 있을 때 에러 메시지 보여주기
    return (
        에러 발생: {error}
    );
  }

  return (
       item.id.toString()}
        renderItem={({ item }) => (
            {item.title}
            {item.body}
          
        )}
      />
    
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
    padding: 16,
  },
  itemContainer: {
    marginBottom: 16,
    padding: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  title: {
    fontWeight: 'bold',
    fontSize: 18,
    marginBottom: 8,
  },
  errorText: {
    color: 'red',
    fontWeight: 'bold',
  },
});

export default DataFetchingScreen;

설명

1. 상태 변수 정의:
   • loading 상태는 데이터 로딩 중인지 여부를 나타냅니다.
   • data 상태는 불러온 데이터를 저장합니다.
   • error 상태는 에러 메시지를 저장합니다.
2. 데이터 로드 로직:
   • useEffect 훅을 사용해 컴포넌트가 처음 렌더링될 때 API를 호출합니다.
   • fetchData 함수에서 try-catch-finally를 사용해 데이터 로드 시도, 에러 처리, 그리고 로딩 상태 변경을 구현했습니다.
3. 로딩 및 에러 처리 UI:
   • 로딩 중일 때는 ActivityIndicator를 사용해 로딩 스피너를 보여줍니다.
   • 에러가 발생한 경우, 적절한 에러 메시지를 사용자에게 보여줍니다.
4. 데이터 표시:
   • 데이터가 정상적으로 로드되면 FlatList를 사용해 데이터를 렌더링합니다.

2. 로딩 및 에러 상태의 좋은 사용자 경험 제공하기

사용자 경험을 개선하려면 단순히 로딩 스피너를 보여주는 것을 넘어, 사용자에게 충분한 정보를 제공해야 합니다. 예를 들어, 네트워크 연결 문제나 서버 응답 지연과 같은 상황에서 "다시 시도" 버튼을 추가하면 사용자 편의성을 높일 수 있습니다.

import { Button } from 'react-native';

if (error) {
  return (
    <View style={styles.centeredView}>
      <Text style={styles.errorText}>에러 발생: {error}</Text>
      <Button title="다시 시도" onPress={() => {
        setLoading(true);
        setError(null);
        fetchData(); // 다시 시도 시 fetchData 호출
      }} />
    </View>
  );
}

위와 같이 "다시 시도" 버튼을 추가해 에러가 발생한 경우 사용자가 쉽게 다시 시도할 수 있도록 할 수 있습니다.

결론

React Native에서 로딩 상태와 에러 상태를 관리하는 것은 사용자에게 앱이 현재 무엇을 하고 있는지 명확하게 전달하는 데 매우 중요합니다. 위의 예제처럼 로딩과 에러 상태를 체계적으로 구현하면 사용자 경험을 크게 개선할 수 있습니다. 로딩 상태와 에러 처리 로직을 적절히 사용하여 사용자에게 친숙한 앱을 만들어보세요!