ToyProject 2 : 영화사이트 (React+Firebase) #3 api 사용

(노마드코드 영화 평점 웹서비스 참고)

무작위 영화 목록을 추출해주는 Home.js 를 만들어보았다. Class 형을 사용했다.

🔵 Home.js

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

class Home extends React.Component{
  // state 선언
    state = {
        isLoading: true,
        movies: [],
      }
	
// getMovies 함수 선언
      getMovies = async () => {
        
        // json 데이터에 접근 
        const {data: { 
          movieListResult: 
          {movieList}
         }
       }
         = await axios.get("http://kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=개인key값");
        // state 값 변경
        // 선언해준 movies에 api 추출 값인 movieList 추가, 
        
        this.setState({ movies: movieList, isLoading: false })
      }
      
      // 컴포넌트 생성. 
      componentDidMount() {
        this.getMovies();
      }
      
	render () {
      // 쓰일 state 가져오기
        const {isLoading, movies} = this.state;
      // 삼항연산자 
        return <div>{ isLoading ? "Loading..." : movies.map((movie) => {
          return (
            // Movie 로 다음의 값들을 전달해준다. 
            <Movie 
             key={movie.movieCd}
             title={movie.movieNm}
             genre={movie.genreAlt}
             prdtYear={movie.prdtYear}
             />
          )
        })}</div>;
      }
     }

export default Home;

🔵 Movie.js

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

function Movie({title, prdtYear}) {
    return (
        <p>
            <span className="movie-title">{title}</span>
            <span>{prdtYear}</span>
        </p>
    )
}

export default Movie;

결과