ReactJS_6_Fetch_Promise

1. 개념

Fetch는 쉽게 말하면 무엇인가 가져오는 것을 뜻한다. 

우리는 ReactJs에서 XML 파일을 링크를 통해 가져오고자 하는데 이 때, Fetch를 통해 가져올 것이다.

구체적으로는 AJAX를 통해 비동기화 방식으로 새로고침 없이 가져온다. 
REACT에서는 AJAX와의 작업이 간편한데다가 사용도 쉽기에 AJAX와의 연동을 추천함.

cf_비동기화 프로그래밍
비동기화란 쉽게 이야기하면, 순차적으로 실행되는 것이 아닌 별개로 실행되는 형태이다. 반드시 좋고 나쁜 것이 아니라 특징적인 것이다.

Promises는 말 그대로 약속으로, 우리가 처리할 것들을 시나리오를 잡아준다.
fetch와 promise를 통해 시나리오를 만들고 관리하면 보다 효율적인 처리가 가능하다. 

이 때, fetch를 통해 링크로 접속하여 then(response)을 통해 결과물을 확인한다. 

그리고 catch를 통해 error를 처리한다. 

fetch를 통해 url을 접근하고 response로 작업의 결과를 가져오면서, catch로 error를 처리한다. 
예제를 통해 이해하는 편이 더욱 효율적이다. 

2. 영화앱

Fetch와 Promise

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie.js';

class App extends Component {

  state = {
  }

  componentDidMount(){
    fetch("https://yts.lt/api/v2/list_movies.json?sort_by=rating")
    .then(potato => potato.json()) //console찍어보자
    .then(json => console.log(json)) //console찍어보자
    .catch(err => console.log(err))
  }

_renderMovies = () => {
  const movies = this.state.movies.map((movie, index) => {
    return <Movie title={movie.title} poster={movie.poster} key={index} /> 
    //key값 부여, key가 없다면 console창에 에러발생
  })
  return movies
}

  render() {
        return (
          <div className="App">
            {this.state.movies ? this._renderMovies() : "Loading"}
          </div>
        );
      }
}
export default App;