fetch이해하기 (네트워킹)

공식문서 : https://reactnative.dev/docs/network

Networking · React Native

 

1. 설명 :

 ㄱ. fetch는 react-native에서 제공하는 기본 네트워킹 API다.

 ㄴ. JSON으로 구성된 URL에서 데이터를 가져올 수 있다.

 ㄷ. 네트워킹은 본질적으로 비동기(Async)다.  ( 비동기 참고자료 : https://koras02.tistory.com/87 )

     (요컨데, 비동기는 멀티태스킹이 된다는 소리다.)

 ㄹ. 

 

 

2. 기본 사용법

 ㄱ. useState 선언

const [state, setState] = useState([])  // 사용할 데이터를 치환해줄 변수
const [loading, setLoading] = useState(true);  // 로딩화면 만들어줄 변수
const [error, setError] = useState(null);  // 에러 잡아줄 변수

 ㄴ. fetch .then .catch 삽입

     함수 선언 후, return값으로 반환한다.

     fetch로 url을 받고, .then으로 json으로 반응하라 하고, .catch로 에러를 잡는다.

const getMoviesFromApi = () => {
  return fetch('https://reactnative.dev/movies.json')
    .then((response) => response.json())
    .then((json) => {
      return json.movies;
    })
    .catch((error) => {
      console.error(error);
    });
};

 ㄷ. 로딩중이거나 에러가 날 경우, return값 지정.

    if (isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" color="#5500dc" />
            </View>
        );
    }

    if (error) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 18 }}>
                    Error fetching data... Check your network connection!
                </Text>
            </View>
        );
    }

 ㄹ. Async 구문 사용 할 때 바꿔줄화면

const getMoviesFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://reactnative.dev/movies.json'
    );
    const json = await response.json();
    return json.movies;
  } catch (error) {
    console.error(error);
  }
};