[ReactJS] 6-2. Promises

promise는 새로운 자바스크립트 컨셉이다. 비동기식 프로그래밍 덕에 cool한 기능이다.

동기식

먼저 실행된 것이 끝나지 않으면 다음 것도 실행되지 않음. 영화를 불러오면서 setState, component 불러오기 등이 불가한 게 단점. 첫번째 라인이 끝날 때까지 실행할 수 없음. 만약 먼저 실행된 서버가 느리다면? 계속 기다려야 한다. 이럴 때 promise를 사용한다. 프로미스는 비동기식.

비동기식

promise 방식. 첫 번째 라인이 끝나든 말든 두 번째 라인이 작업을 시작한다. 계속 다른 작업을 스케줄링 할 수 있다.

promise

좋은 혹은 나쁜 시나리오를 만들어준다. 예를 들어, 애인과 토요일에 영화보러 가기로 약속을 했다. 두 가지 케이스가 가능하다. 첫 번째는 내가 약속을 지켜서 영화를 보러 가는 것. 다른 케이스는 내가 돈이 없어서 영화티켓을 사지 못하고 약속이 깨지는 것. 2가지 시나리오가 생긴다. 영화를 보러간다 / 못 보러 간다. 이게 promise의 원리와 비슷하다. 시나리오가 있고 이를 관리한다. 내가 약속을 지키면 영화를 보러가고 좋은 일이 생긴다. 안 지키면 영화를 못 보고 나쁜 일이 생긴다.

1. promise 적용하기

import React, { Component } from "react"
import "./App.css"
import Movie from "./Movie" //Movie.js에서 여기로 export한 컴포넌트를 import
 
class App extends Component {
  state = {}  // 삭제하면 'movies' property를 읽을 수 없음
 
  componentDidMount() {
    fetch("https://yts.am/api/v2/list_movies.json?sort_by=download_count?sort_by=rating")
    // 위의 라인이 완료되면 뭔가를 해라
    .then(response => console.log(response))
    // 근데 그 라인이 에러가 있으면 catch해서 나한테 보여줘라
    .catch(err => consol.log(err))
  }
 
  // 함수를 만들어 놓고
  _renderMovies = () => {
    const movies = this.state.movies.map((movie, index) => {
      // 괄호 넣는 것 잊지 말기
      return <Movie title={movie.title} poster={movie.poster} key={index} /> //key prop으로 index를 작성
    })
    return movies
  }
 
  // render에 조건문으로 집어넣기
  render() {
    return (
      <div className="App">
        {// 데이터가 없다면 'Loading'을 띄우고, 있으면 영화정보가 보이도록 한다.
        this.state.movies ? this._renderMovies() : "Loading"}
      </div>
    )
  }
}
 
export default App

fetch가 완료되면 then을 실행하고 에러가 있으면 catch에서 console에 출력한다. then()은 1개의 attribute, 즉 fetch의 결과물인 오브젝트를 준다. 그 이름을 response라고 이름짓는다.

페이지를 실행하면 response가 생성된다. 이름을 response 대신 potato로 해도 상관없다. 

더 보기를 해보면 headers가 있고, request가 성공적이라는 뜻의 ok: true, redirect 되지 않았고, ok라는 뜻의 status 200, 텍스트는 없고, 이러한 url을 불렀다는 내용을 출력하고 있다.

2. response object를 JSON으로 바꾸기

componentDidMount() {
    fetch("https://yts.am/api/v2/list_movies.json?sort_by=download_count?sort_by=rating")
      // 위의 라인이 완료되면 뭔가를 해라
      .then(potato => potato.json())
      .then(json => console.log(json))
      // 근데 그 라인이 에러가 있으면 catch해서 나한테 보여줘라
      .catch(err => console.log(err))
  }

JSON으로 변환하고 그것에 대한 내용을 console로 출력

JSON 데이터가 출력된다.

정리하자면, fetch는 url을 Ajax로 심플하게 불러올 수 있기 때문에 사용한다. promise는 무언가를 수행하면서 then이나 catch로 받아볼 수 있다.