Axios를 사용한 API 연동

라이브러리를 통한 데이터 통신

API에 활용하는 툴 중 하나인 axios를 사용한 예시를 적어놓았다.

Install axios

Documentation: npmjs.com

npm install axios

React 영화 웹

API from YTS Proxy. API endpoint list

For the endpoint /list_movies.json use https://yts-proxy.now.sh/list_movies.json

import axios from 'axios';

class Home extends React.Component{
  state = {
    isLoading: true,
    movies: []
  };
  getMovies = async () => {
    const {data: {data: {movies}}} = await axios.get(
        "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
        )
    this.setState({ movies, isLoading: false });
  }//es6
  componentDidMount(){
    this.getMovies();
  }
  render(){
    const { isLoading, movies } = this.state; //es6?
    return (
    <section className="container">
      {isLoading ? (
        <div className="loader">
          <span className="loader__text">로딩중</span>  
        </div>
      ) : (
        <div className="movies">
          {movies.map(movie => (
          <Movie
            key={movie.id}
            id={movie.id} 
            year={movie.year} 
            title={movie.title} 
            summary={movie.summary} 
            poster={movie.medium_cover_image} 
            genres={movie.genres} 
          />
          ))}
        </div>
        )}
    </section>
    )
  }
};

Weather app

API from openweather

import * as Location from 'expo-location';

export default class extends React.Component {
  state = {
    isLoading: true
  };
  getWeather = async(latitude, longitude) => {
    const { 
      data: {
        main: { temp },
        weather
      }  
    } = await axios.get(
      `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
      );//es6
    console.log(weather);
    this.setState({ 
      isLoading:false, 
      condition: weather[0].main,
      temp,
     });
  }
  getLocation = async() => {
    try{
      await Location.requestForegroundPermissionsAsync();
      const {
        coords: {latitude, longitude}
      } = await Location.getCurrentPositionAsync();
      // send to APT and get weather;
      this.getWeather(latitude, longitude)
    } catch(error) {
      Alert.alert("Cannot find you");
    }

  }
  componentDidMount(){
    this.getLocation()
  }
  render(){
    const { isLoading, temp, condition } = this.state;
    return isLoading ? <Loading /> : <Weather 
    temp={Math.round(temp)} 
    condition={condition}
    />
  }
}

expo-cli에서 latitude와 longitude를 얻어서 openweather API에 입력함으로써 현재 내 위치의 날씨 정보를 가져온다.