Study/React

리액트 기초- 9

그징그징 2018. 8. 8. 16:19

리액트 기초- 9



(https://academy.nomadcoders.co/courses/enrolled/216871)

(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv)


노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다.




Ajax

(비동기 자바스크립트 그리고 xml)

(https://yts.am/api#list_movies)


해당 사이트에서



를 이용할것 입니다!


Ajax를 React에서 사용하는 방법

-> fetch(url) 함수 사용


App.js



Promise

-> 자바스크립트의 새로운 컨셉(?)입니다!

-> 영화관련 API를 불러오는 동안 (fetch) 다른 작업을 하길 위해(비동기 - Asynchronous) 사용됩니다!





fetch를 통해 get 해온 결과!를

then(작업이 완료되면)

catch(혹시 에러기 발생했을 경우!)


fetch의 결과물을 then 에서 처리를 합니다.

response 라는 이름으로 받아서 log를 확인해봅니다.


ok: true -> 성공

status: 200 -> 성공 

이라는 뜻!


body: ReadableStream

은 해당 response(즉 결과값)이

바이트(010101010...)로 이루어져 있다는 뜻입니다.


json 형식으로 변경해줘야합니다.




response(바이트).json() -> json 형식으로 변경!

변경한 결과 물 

.then 해서 json 형식인지 확인해봅니다!