[React JS] Promises

promise는 새로운 자바스크립트 컨셉이다.

이게 쿨한 이유는 asynchronous programming 때문이다.

synchronous가 뭐냐면,

예를 들자면,

 componentDidMount(){

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

   console.log('hello')

 }

라고 실행을 하면,

첫번째 줄이 먼저 실행이 되어야만 두번째 줄이 실행이 된다는 것이다.

이걸 synchronous(동기)라고 한다.

이 기능은 좋을 때도 있지만, 별로일때도 있다.

왜냐하면, 예를 들면 내가 영화를 불러오고 싶고, 동시에 set state,call component,..등등을 하고 싶을 때

이 모든 작업을 할 수 없다. 그 이유는 첫번째 라인 작업이 끝날때까지 기다려야하니까.

내가 두개의 db를 불러온다고 생각해보자

한개는 영화, 나머지 한개는 시리즈, 혹은 애니메이션

이 말은 즉, 영화 api 작업이 끝나야, 애니메이션 api를 불러올 수 있다는 것이다.

두번째 애니메이션 api는, 반드시 첫번째 영화 작업이 끝나야 가능한 것이다.

이거의 단점은, 만약 영화 서버가 느리면?

계속 기다려야한다. 애니메이션은 영화 api 다음으로 불러올 수 있으니까

자바스크립트 + Ajax를 할때 별로다.

이 때 쓰는 것이 Promise를 사용한다.

첫번째 라인이 다 끝나든 말든, 두번째 라인이 작업을 한다는 뜻이다.

이게 좋은 이유는, 계속 다른 작업을 스케줄 해 놓을 수 있기 때문이다.

그리고 모든 작업들은 다른 작업 수행이랑 관계없이 진행된다.

또 다른 promise의 기능은,

시나리오를 잡는 방법을 만들어준다.

좋은 혹은 나쁜 시나리오.

이게 무슨 의미냐면,

예를 들어 설명한다.

너가 여자친구가 있어. 그녀와 약속을 했지. 담주 토욜에 영화보러가기로.

그녀는 월요일에 영화보러가겠다고 기다리지 않을 것이다.

그녀는 2가지 케이스가 가능하다는 것을 안다.

첫번째 너가 약속을 지켜서 영화보러 가는 것.

다른 케이스는 너가 돈이 없어서 그녀의 영화티켓을 사지 못하는 것.

그래서 약속이 깨짐

즉, 2가지 시나리오.

영화를 보러간다. 영화를 못보러간다.

이게 우리가 지금 이야기하는 promise 원리와 비슷하다

2가지 시나리오가  있고, 이를 관리하는 것이다.

너가 약속을 지키면 영화를 보고 좋은 일만 생기겠지만,

너가 약속을 못지키면, 영화를 못보고 안좋은 일만 생기겠지.

여기서도 같다.

fetch,promise가 좋은 이유는 시나리오가 생기고 이를 관리할 수 있기 때문이다.

그럼 이제 promise를 적용해보자

일단 코드를 보고 이해하자!

 componentDidMount(){

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

   .then(response => console.log(response))

   .catch(err => console.log(err))

 }

.then 위의 작업이 성공하면이 아니라, 작업이 완료되면 then을 불러오는 것이다.

그 다음엔 .catch를 써준다. 위의 라인이 완료되면, 뭔가를 해라. 근데 위의 라인이 에러가 있으면

나에게 보여줘라.

(ps. 여기서 response는 다른 문자를 넣어줘도 상관없다.)

그리고 localhost:3000 에서 콘솔을 확인해보면

1. Response {type: "cors", url: "https://yts.ag/api/v2/list_movies.json?sort_by=rating", redirected: false, status: 200, ok: true, …}
1. body:(...)
2. bodyUsed:false
3. headers:Headers
1. __proto__:Headers
4. ok:true
5. redirected:false
6. status:200
7. statusText:""
8. type:"cors"
9. url:"https://yts.ag/api/v2/list_movies.json?sort_by=rating"
10. __proto__:Response

위와 같이 보일 것이다.

여기서 body를 눌러보면

1. body:ReadableStream
1. locked:false

위와 같이 보일것이다. 이것은 body를 json으로 바꿔줘야한다.

 componentDidMount(){

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

   .then(response => response.json())

   .then(json => console.log(json))

   .catch(err => console.log(err))

 }

이렇게 바꿔준다.

그리고 콘솔에서 확인해보자

그리면 영화 모든 정보들을 다 볼 수 있다.

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

이렇게 못생긴 api가,

response로 체크하고, 제이슨으로 변환하고, 콘솔로 보면,

이쁜 api로 바뀌면서 모든 정보를 다 제공해준다.

fetch가 좋은 이유는 url을 에이작스로 불러올 수 있으니까! 

그것도 아주 심플하게!!

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