📖리액트) open api 이용하기

axios를 이용하여 영화 open api를 가져와서 react로 출력하는 과정을 알아보겠다

open api는 개발에 있어서 필수적으로 알아야하는 부분이라고 생각한다 

네이버 검색어, 날씨, 마스크 재고 api 등등 다양하게 응용할 수 있기 때문에 사용하는 방법을 정확히 알고 쓸 필요가 있다!

 

- App.js (전체 코드)

import React from 'react';
import axios from 'axios';
import Movie from "./Movie";

class App extends React.Component {
 state = {
   isLoading: true,
   movies: [],
 }
 getMovies = async () => {
   const {data: { 
     movieListResult: 
     {movieList}
    }
  }
    = await axios.get("http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=e047c2ef1e69765974722e6fda75e84c");
   console.log(movieList)
   this.setState({ movies: movieList, isLoading: false })
 }
 componentDidMount() {
   this.getMovies();
 }
 render () {
   const {isLoading, movies} = this.state;
   return <div>{ isLoading ? "Loading..." : movies.map((movie) => {
     console.log(movie);
     return (
       <Movie 
        key={movie.movieCd}
        title={movie.movieNm}
        genre={movie.genreAlt}
        prdtYear={movie.prdtYear}
        />
     )
   })}</div>;
 }
}

export default App;

먼저 함수형 대신 클래스형으로 작성했다 

class형을 이용해야 동적인 데이터를 관리하는 state를 사용할 수 있기 때문에 그렇다 

 

And..

(함수형과 클래스형 차이는 return을 사용할 수 있느냐 없느냐!)

 

위 App.js에서

state = {
   isLoading: true,
   movies: [],
 }

isLoading은 말그대로 로딩중일 때 true를 반환한다 

movies는 앞으로 가져올 api 데이터를 저장할 공간이라고 생각하면 된다( 어떻게 저장해야할지 먼저 생각해보면 나중에 더 이해하기 쉬운거같다)

getMovies = async () => {
   const {data: { 
     movieListResult: 
     {movieList}
    }
  }
    = await axios.get("http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=e047c2ef1e69765974722e6fda75e84c");
   console.log(movieList)
   this.setState({ movies: movieList, isLoading: false })
 }

api 정보를 가져오는 부분이고 axios를 이용해서 가져온 데이터를 getMovies 라는 변수에 저장했다

console창을 확인해보면

이렇게 데이터들을 가져온것을 확인 할 수 있다

 

이제 이 데이터들을 저장하면 된다

this.setState({ movies: movieList, isLoading: false })

setState는 전 포스트에서 설명했는데 state를 부분적으로 수정해준다고 생각하면 된다

따라서 movies라는 공간에 데이터를 집어넣고 isLoading을 false로 반환한다는 뜻이다

 componentDidMount() {
   this.getMovies();
 }

componentDidMount는 실행했을 때 함수이다 

즉 getMovies함수를 실행한다는 것이다

 render () {
   const {isLoading, movies} = this.state;
   return <div>{ isLoading ? "Loading..." : movies.map((movie) => {
     console.log(movie);
     return (
       <Movie 
        key={movie.movieCd}
        title={movie.movieNm}
        genre={movie.genreAlt}
        prdtYear={movie.prdtYear}
        />
     )
   })}</div>;
 }

삼항 연산자를 이용하는 부분인데 알아두면 정말 유용하다고 생각한다 ㅎㅎ

 

isLoading: true 이면 "Loading..."을 출력하고 

isLoading: false 이면 다음과 같은 함수를 실행한다는 것이다

 

map() 함수는 전 포스트에서 다뤘다(아직 화살표 작성법이 헷갈린다ㅠ)

 

return문을 보면 movies에 저장된 데이터들을 선별하는것이다(Movie 함수는 뒤에 나온다)

(movies에 저장된 많은 데이터들을 모두 출력하는게 아니라 필요한 데이터만 선별해서 사용하기 위해서!)

 

 

데이터를 출력하기 위해 따로 Movie.js라고 파일을 만들었다

import React from 'react';
import PropTypes from 'prop-types';

function Movie({id, title, genre, prdtYear}) {
    return <div>
        <h2>{title}</h2>
        <h4> {genre}, {prdtYear}<br></br><br></br></h4>
        </div>;
}

Movie.propTypes = {
    title: PropTypes.string.isRequired
};

export default Movie;

 

결과물!

 

 

 

open api

http://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do

영화진흥위원회 오픈API

 

말그대로 open api이므로 key발급받아서 사용하면 된다~

다만 내가 못찾은건지 모르겠지만 이미지 src는 없어서 아쉬웠다 ㅠ

 

 

http://www.yes24.com/Product/Goods/90386663

Do it! 클론 코딩 영화 평점 웹서비스

이 책을 보고 따라해보면서

연습삼아 약간 수정해서 만들어본것이다~!

(저자는 코딩 유튜버 노마드코더인데 정말 코잘알이다 코잘알)

 

 

다음 포스트는 책을 보고 따라만든 것을 기록해보겠다!