[ReactNative] open api 로 데이터 가져오기 01 - using fetch() , useState()

 

useState() , Fetch() 를 이용한 데이터 가져오기 

movie 컴포넌트는 useState()와 Fetch() 함수를 사용하여, api를 호출하고 그 결과에 따라 Loader 또는 Container 컴포넌트를 반환한다.  가장 하단에 컴포넌트 전체 코드가 있다. 

 

데이터 가져오기 movie 컴포넌트 작성 예제

movie 컴포넌트 주요 코드 

  const getNowPlaying = async () => {
    const { results } = await (
      await fetch(
        `APIURL`
      )
    ).json();
    
    setLoading(false); 
    setNowPlaying(results);
  };

 

useEffect() 로 getNowPlaying();을 호출한다.

  useEffect(() => {
    getNowPlaying();
  }, []);

 

loading이 true 이면 Loader 컴포턴트를 리턴하고 false 면 Container 를 리턴한다. Container 컴포넌트는 api로 받은 데이터를 map()을 이용해서 랜더링한다.

 

return loading ? (
    <Loader> <ActivityIndicator size="large" /> </Loader>
  ) : (
    <Container> 
        {nowPlaying.map((movie) => (
          <View key={movie.id}>
            <BgImg souce={{ uri: makeImgPath(movie.backdrop_path) }}></BgImg>
          </View>
        ))}
    </Container>

 

 

movie 컴포넌트 전체 코드 

const Movies: React.FC<NativeStackScreenProps<any, "Movies">> = () => {
  const [loading, setLoading] = useState(true);
  const [nowPlaying, setNowPlaying] = useState([]);

  const getNowPlaying = async () => {
    const { results } = await (
      await fetch(
        `APIURL`
      )
    ).json();
    
    setLoading(false);
    setNowPlaying(results);
  };

  useEffect(() => {
    getNowPlaying();
  }, []);
  return loading ? (
    <Loader>
      <ActivityIndicator size="large" />
    </Loader>
  ) : (
    <Container>
      <Swiper
        loop
        timeout={3.5}
        controlsEnabled={false}
        containerStyle={{ width: "100%", height: SCREEN_HEIGHT / 4 }}
      >
        {nowPlaying.map((movie) => (
          <View key={movie.id}>
            <BgImg souce={{ uri: makeImgPath(movie.backdrop_path) }}></BgImg>
          </View>
        ))}
        <View style={{ backgroundColor: "red" }}></View>
        <View style={{ backgroundColor: "blue" }}></View>
        <View style={{ backgroundColor: "red" }}></View>
        <View style={{ backgroundColor: "blue" }}></View>
      </Swiper>
    </Container>
  );
};
export default Movies;

끝