[React] API 불러오기

API를 불러오기 앞서 axios를 먼저 react에 설치해 주어야 합니다. Axios에 대한 다큐먼트는 아래 링크에서 확인하실수 있습니다. 

Getting Started | Axios Docs

Axios 설치

npm i axios를 터미널에 입력해주면 설치가능합니다. 터미널을 여는 방법은 command + shift + p 후 서치박스에 terminal이라고 적어주시면 가장 상단에 있는 목록을 들어가 주시면 됩니다. 

 

 

우리가 사용할 API - YTS

이번예제에서 써줄 API는 YTS입니다. 여기서 listMovies를 가져와보도록 하겠습니다. 

API Documentation - YTS YIFY

여기서. json으로 끝나는 endpoint를 사용해줄 것입니다. 

테스트로 이 링크로 들어가면 못알아보게 써져있는 json코드를 보실 수 있습니다. 

 

하지만 크롬 extension을 사용해주면 아래와같이 깔끔한 json코드로 보실 수 있습니다. 설치해야 할 크롬 익스텐션 링크는 아래 확인해주세요.

 

 

크롬 익스텐션 링크

JSON Viewer

 

 

React에 API URL에 있는 Json정보 가져오기

이제 가져올 api와 axios가 준비되었으니 우리 프로젝트에 이 json 정보를 가져오면됩니다.

 

먼저 get movies라는 함수를 만든후, 여기서 api에 데이터를 가져오는 작업을 해준후 아래 라이프 사이클 중 하나에 넣어주도록 하겠습니다. 

리엑트 라이프 사이클

 

라이프 사이클을 선택하기전, 우리가 불러올 json코드를 보다시피 굉장히 길고 모두 불러오는데 시간이 오래 걸립니다. 

 

먼저 axios를 통해 api정보를 불러오는 함수를 살펴보겠습니다. 

 

getMovies = async() =>{ //async
    const {
      data : {
         data: { movies } 
        } 
      } = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json")
    this.setState({movies, isLoading: false})
  }

그래새 위코드를 보시면 async와 await을 통해 불러올 때까지 기다려주는 함수를 넣어주었습니다. 

 

그리고 url을 불러와주는 방법은 axios.get("url")을 적어주시면 됩니다. 

 

이렇게 하면 리 엑트로 Json내용을 가져올 수 있게 됩니다. 

 

React에 API URL에 있는 Json정보 가져오기 - 2

이제 const movies로 json데이터를 가져오게되었습니다.

 

그럼 이 데이터를 어떻게 사용해줄수있을까요? 

 

바로 const state에 넣어주면됩니다. state에 새로운 값을 지정해주기 위해서는 state에 함수중 setstate을 사용해야 합니다. 

 

아래 코드에서 state로 어떻게 json이 삽입되었는지 살펴보겠습니다. 코멘트를 살펴보겠습니다. 

 

class App extends React.Component{ 
  
  state = { 
  //여기가 state이고 movies에 리스트가 바뀌어질때마다 업데이트해주어야하기때문에 state에 json데이터 값을 저장합니다. 
      isLoading: true,
      movies:[]
  }
  
  
  getMovies = async() =>{
    const {
      data : {
         data: { movies } 
        } 
      } = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json")


     //이코드의 의미는 첫번째 movies는 setstate에서 movies고 두번째 movies는 json에서의 movies를 의미합니다. 
    this.setState({movies: movies, , isLoading: false})
    
    
  }

  componentDidMount(){
      this.getMovies();
  }
  
  render(){
    const { isLoading } = this.state
    return (
      <div>{isLoading ? "Loading..." : "We are ready"}</div>
    )
      // set state 를 호출할때마다, react는 render를 호출한다.
    
  }

}

 

React에 Json 정보 렌더링 하기

 

json 리스트를 리엑트에 불러왔다면 이제 json 안에 있는 정보를 렌더링 하기 좋게 데이터들을 나눠야 합니다. 이때 우리는 function component를 통해 필요한 정보들을 나눠주도록 하겠습니다. 

 

그러기위해 movies.js라는 function을 만들어주겠습니다. 아래와 같이 새로운 js파일을 만들어주세요. 

prop type을 통해, 우리가 불러오는 값이 원하는 데이터 타입이 일치하는지 propType을 통해 확인시킵니다. 

import React from "react"
import PropTypes from "prop-types"

function Movie({id, year, title, summar, poster}){
    return <h4>{title}</h4>
}

Movie.propTypes = {
    id : PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    

}

export default Movie

이제 이 function을 App에 렌더하면 react 화면에 보이게 됩니다. 

 

 

 

 

중간점검

지금까지 쓴 코드입니다.

 

App.js

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

class App extends React.Component{ //extends는 약간 인터페이스 역할 react component의 인터페이스를 가져오는것
  state = { //state 는 object이고 데이터를 여기에 넣어줘야한다. 근데 function app 컴포넌트를 써줬을때는 바뀌는 데이터인 state를 사용해줄수없었다. 
      isLoading: true,
      movies:[]
  }
  getMovies = async() =>{
    const {
      data : {
         data: { movies } 
        } 
      } = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json?sort_by=rating")
    console.log(movies)
    this.setState({movies: movies, isLoading: false}) //이코드의 의미는 첫번째 movies는 setstate에서 movies고 두번째 movies는 json에서의 movies를 의미합니다. 
  }

  componentDidMount(){
      this.getMovies();
  }
  
  render(){
    const { isLoading, movies } = this.state
    return (
      <div>{isLoading ? "Loading..." : movies.map(movie => {
          console.log(movie);
          return <Movie key={movie.id} id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.medium_cover_image}/>
      })}</div>
    )
      // set state 를 호출할때마다, react는 render를 호출한다.
    
  }

}


export default App;

Movies.js

import React from "react"
import PropTypes from "prop-types"

function Movie({id, year, title, summar, poster}){
    return <h4>{title}</h4>
}

Movie.propTypes = {
    id : PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    

}

export default Movie

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
    <App/>,
  document.getElementById('root')
);

 

 

CSS 로 스타일링

지금 까지 만든 코드를 실행하면 아래와 같습니다.

이제 스타일링을 해주도록 하겠습니다.

 

스타일링을 해주기전 먼저 html로 작성해줘야합니다. 

 

 

html 작성 

 

Movies.js에 타이틀을 넣어줬었습니다. 그러므로, 다른 json 자료들을 가져올때 여기에 먼저 구현해주어야합니다. 

 

Movies.js

import React from "react"
import PropTypes from "prop-types"

function Movie({id, year, title, summary, poster}){
    return <div class= "movies__movie">
        <h3 class = "movie_title">{title}</h3>
        <h5 class = "movie_year">{year}</h5>
        <p class = "movie_summary">{summary}</p>
    </div>
}

Movie.propTypes = {
    id : PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    

}

export default Movie

보시다싶이 Movies를 불러오면 title, year summary를 같이 불러오게됩니다. 

 

그리고 이제 이 Movie function을 App class안에 넣어주어야합니다. 

 

 

App.js

  render(){
    const { isLoading, movies } = this.state
    return (
      <section class = "container">
        {isLoading ? ( //{ isLoading ? (false) : (true)}
          <div class = "loader">
            <span class = "loader__text">Loading..</span>
        
          </div>
        ) : (
          <div class = "movies">
            {movies.map(movies => ( 
              <Movie //이와같이, Movie 컴포넌트를 불러옵니다. 
                key = {movies.id} 그리고 movies라는 이름의 json파일과 key id year title들을 가져와서 movie에 넣어주면됩니다. 
                id={movies.id}
                year={movies.year}
                title={movies.summary}
                poster={movies.medium_cover_image}
                />
            ))
            }
          </div>

      )}
      </section>
    )
      // set state 를 호출할때마다, react는 render를 호출한다.
    
  }

}


export default App;

 

CSS 작성 

 

css를 작성하기전, css를 파일을 만들어줘야합니다.  App.css와 Movies.css를 만들어주겠습니다. 

그리고 각각의 css파일을 js에 import시켜 주겠습니다. 

 

Movies.js

import React from "react"
import PropTypes from "prop-types"
import "./Movies.css"; //경로 설정입니다. 

function Movie({id, year, title, summary, poster}){

App.js

import React from 'react';
import axios from "axios";
import Movie from "./Movies";
import "./App.css";

class App extends React.Component{

 

위와 같이 css파일을 연결해주었다면 같은 형식으로 css를 작성하면됩니다. 

 

 

 

 

3 입력