만들면서 배우는 리액트 튜토리얼 - 6.AJAX와 Promise
1. AJAX(Asynchronous Javascript And XML)
Cf) 요즘에는 XML은 사용하지 않고 JSON(JavaScript Object Notation)을 많이 사용한다.
그래서 사실 AJAJ(Asynchronous Javascript And JSON)라고 부르는게 맞다.
전에는 url에서 데이터를 불러왔지만 AJAX가 적용되면서 자바스크립트로 비동기적인
방식을 이용하여 데이터를 불러올 수 있게 되었다. 이 방식을 이용하면 로딩을 할 때
API를 불러옴으로써 뭔가를 불러올 때마다 페이지를 새로고침 할 필요가 없어진다.
import React, { Component } from 'react';
import './App.css';
import Movie from './Movie'
class App extends Component {
state = [
]
componentDidMount() {
// AJAX - fetch
fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
}
_renderMovies = () => {
const movies = this.state.movies.map((movie, index) =>
<Movie title={movie.title} poster={movie.poster} key={index} />
)
return movies
}
render() {
return (
<div className="App">
{/*
this.state.movies 데이터가 존재하면 기존 state mapping을 실행하고,
아니면 Loading... string을 띄워준다
*/}
{this.state.movies ? this._renderMovies() : "Loading..."}
</div>
);
}
}
export default App;
AJAX의 fetch를 이용하여 데이터를 불러오는 예시
이제
직접 데이터를 입력하지 말고 API를 이용하여 데이터를 불러오자.
위
코드에서는 componentDidMount()에 fetch(URL)을 사용하여 데이터를 불러 온다.
크롬
콘솔에서 개발자 도구를 켜고 Network 탭을 가서 새로고침을 해보면 해당 URL에서
데이터를 불러오는 것을 확인 할 수 있다.
2. Promise
리액트의
새로운 컨셉으로 Asynchronous방식이다.
즉, 첫번째 라인이 끝나기 전에 다른 라인도 동시에 실행된다는 것이다.
componentDidMount() {
// AJAX - fetch
fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
// 위의 라인이 완료되면(jsut finished, not fulfilled)
// then은 위 라인의 결과만을 attribute로 가짐(주로 response라고 부름)
.then(response => console.log(response))
// 위의 라인에 에러가 있으면
.catch(err => console.log(err))
}
기본 promise 활용 예시
Promise
내용
이
promise는 header를 가지고 있고,
ok: true는 request가 성공적이었다는 뜻
redirected되지 않았고
status: 200(ok)
텍스트는
없다
ReadableStream은 바디가 byte(010101…)로 이루어졌다는 뜻이고,
bodyUsed: false 이므로 아직 바디가 사용되지 않을 것을 알 수 있다.
이것을
우리가 확인할 수 있는 형태로 보려면 JSON으로 바꿔주어야 함.
componentDidMount() {
// AJAX - fetch
fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
.then(potato => potato.json()) // 사람이 읽을 수 있게 byte -> json으로 변경
// then은 원하는 만큼 원하는 형태로 바꿔서 사용할 수 있다
.then(json => console.log(json))
// 위의 라인에 에러가 있으면
.catch(err => console.log(err))
}
Promise
-> JSON 변경
예시
JSON으로 바꾼 Promise 내부
0 comments