이제 ajax를 공부할 시간입니다.
ajax, Asynchronous JavaScript and XM의 약자입니다.
요즘은 XML 별로 안쓰고 우리가 쓰게될 포멧은 JSON입니다.
JSON은 JavaScript Object Notation 입니다.
오브젝트를 자바스크립트로 작성하는 기법입니다.
AJAX를 React에 적용하는 방법은 심플합니다.
FETCH 덕분입니다.
FETCH 는 영어로 뭔가를 잡는 것을 뜻합니다.
그럼 fectch request를 만들어볼까요?
저희가 만든 fetch request는 url로 갈겁니다.
http request에 관한 방법이 많은데
이 연재시간에는 그 방법들이 어떻게 리액트와 작업되는지 다 보지는 않을겁니다.
이 연재시리즈에서는 GET에 대해서만 이야기할 것입니다.
저희는 FETCH를 이용해서 URL에서 무엇인가를 GET하는 방법을 배울겁니다.
저희가 사용할 URL은 연재 초반에 이야기한 API -YTS 토렌트 영화 데이터베이스에서 갖고올겁니다.
아래 주소에 접속하시면 엄청 큰 자바스크립트 오브젝트를 보실 수 있으실 겁니다.
이걸 리액트에서 불러올 수 있어야 합니다.
작업을 해 보겠습니다. 이전에 작업한 timeout, 매트릭스 , 올드보이 .. 영화들 대신에,
삭제를 하고 다시 작업을 하도록 하겠습니다. 진짜 영화DB를 원하기 때문입니다.
삭제를 하기 전에 App.js 파일은 아래와 같습니다.
import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
class App extends Component {
//Render : componentWillMount() -> render() -> componentDidMount()
//Update : componentWillReceiveProps() -> shouldComponentUpdate() -> componentwillUpdate() -> render() -> componentDidUpdate
state = {
}
componentDidMount() {
setTimeout(() => {
this.setState({
movies: [
{
title: "Matrix",
poster:
},
{
title: "Full Metal Jacket",
poster:
},
{
title: "Oldboy",
poster:
},
{
title: "Star Wars",
poster:
}
]
})
}, 5000)
}
_renderMovies = () => {
const movies = this.state.movies.map((movie, index) => {
return <Movie title={movie.title} poster={movie.poster} key={index} />
})
return movies
}
render() {
return (
<div className="App">
{this.state.movies ? this._renderMovies() : 'Loading'}
</div>
);
}
}
export default App;
삭제를 하고 난 후에 파일은 아래와 같습니다.
import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
class App extends Component {
//Render : componentWillMount() -> render() -> componentDidMount()
//Update : componentWillReceiveProps() -> shouldComponentUpdate() -> componentwillUpdate() -> render() -> componentDidUpdate
state = {}
componentDidMount() {
}
_renderMovies = () => {
const movies = this.state.movies.map((movie, index) => {
return <Movie title={movie.title} poster={movie.poster} key={index} />
})
return movies
}
render() {
return (
<div className="App">
{this.state.movies ? this._renderMovies() : 'Loading'}
</div>
);
}
}
export default App;
이렇게 수정하고 나면 Loading 이라는 메세지만 출력 될 것 입니다.
인터넷창에서 요소검사 network 탭에 가서 자세히 살펴보겠습니다.
localhost를 불렀고 , 리액트를 부르고(bundel.js), 그리고 데이터베이스를 불렀습니다. API 말입니다.
이렇게 ajax + react는 쉽습니다.
다시 정리하면 컴포넌트가 mount 되면 저 url을 가서 fetch 해오는 것입니다.
원하는 어떤 URL도 불러올 수 있습니다. 구글 url도 가능합니다.
ajax는 url을 자바스크립트로 asynchronous(비동기화) 방법으로 불러오게 됩니다.
왜 사람들은 ajax를 쓸까요? 왜냐하면 무엇인가를 불러올 때마다 페이지 새로고침을 하고 싶지 않기 때문입니다.
예를 들면, 로딩을 하면 API를 불러오고, 동시에 평점을 가져오기도 하기도 합니다.
그래서 ajax가 멋진 것입니다. 자바스크립트와 같이 데이터를 다룰 수 있기 때문입니다. 뒤에 숨어서 말입니다.
우리 프로젝트를 예로 들면 , 데이터를 가져오는 상황을 사용자가 볼 수 없습니다. URL창에도 말입니다.
새로고침 없이 작업이 가능하고 리액트와 작업이 간편하기 때문에 AJAX를 추천합니다.
'React > 왕초보 도전' 카테고리의 다른 글
| 18. 간단한 영화 웹 서비스 만들기 13 (0) | 2018.01.30 |
|---|---|
| 17. 간단한 영화 웹 서비스 만들기 12 (0) | 2018.01.25 |
| 15. 간단한 영화 웹 서비스 만들기 10 (0) | 2018.01.19 |
| 14. 간단한 영화 웹 서비스 만들기 9 (0) | 2018.01.16 |
| 13. 간단한 영화 웹 서비스 만들기 8 (0) | 2018.01.09 |