[React JS]Ajax in React

Ajax는 Asynchronous JavaScript and XM의 약자이다.

요즘은 XML 별로 신경안쓰고, 우리가 신경쓰는 포멧은 JSON이다.

JSON은 JavaScript Object Notation의 약자이다.

오브젝트를 자바스크립트로 작성하는 기법이다.

에이작스를 리액트에 적용하는건 간단하다.

fetch를 이용하면 아주 간단함

자! 그러면 fetch request를 만들어보자.

우리가 만든 fetch request는 url로 갈꺼다.

우리는 FETCH를 이용해서 url에서 뭔가를 GET하는 방법을 배울 것이다.

https://yts.ag/api/v2/list_movies.json 

이걸 리액트에서 불러올 것이다.

그러기 전에, 해당 api의 문서를 살펴보면

평점순으로 불러오기 sort_by=rating 주소에 넣어주면 된다.

이렇게,

https://yts.ag/api/v2/list_movies.json?sort_by=rating

그러면 평점순으로 정렬이 되어있다.

최종적으로 이 URL이 우리가 리액트에서 불러들이고 싶은 것이다.

일단 app.js로 돌아가서,

이전에 작업한 timeout,매트릭스,올드보이 영화들 대신에,

삭제하고 다시 작업을 하자. 진짜 영화 db를 원하기 때문이다.

컴포넌트가 did mount를 했을때, 우리는 불러오고 싶다.

요런 식으로 작성해준다.

fetch('https://yts.ag/api/v2/list_movies.json?sort_by=rating')

fetch는 아무 url이나 불러올수있다.

엄청 간단해졌다.

Ajax는 url을 자바스크립트로 비동기화방법으로 불러온다.

왜 사람들은 Ajax를 쓸까?

뭔가를 불러올때마다 페이지를 새로고침하고 싶지 않으니까 그렇다!

예를 들면, 로딩을 하면 api를 불러오지, 동시에 평점도 가져오지 등등 

Ajax는 자바스크립트와 같이 데이터를 다룰 수 있으니까. 뒤에 숨어서!! ㅎㅎ

우리 수업을 예를 들면 새로고침없이 작업이 가능하고, 리액트와 작업이 간편하기 떄문에 Ajax를 추천한다.

*본 포스팅은 노마드코더에서 공부한 내용을 정리한 것입니다.