리액트 기초- 10

리액트 기초- 10

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

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

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

---

async와 await

(fetch, then 을 계속 하다보면 callback 지옥에 빠지게된다.)

then 안에 then... 안에 then..

callback 지옥에 빠집니다.

그에 대한 해결책(async, await)

---

사용자 정의 함수 2개를 만들어줍니다.

_getMovies와 _callApi

getMovies는 가져온 영화관련 정보를(json형식) state에 추가하는 역할을 할것이고

callApi는 영화관련 API를 가져와서 json으로 바꾸고 그 값을 반환할것입니다.

일단

비동기 형식이라는걸 알고 진행을 해야합니다.

getMovies를 호출해 놓고

getMovies의 일이 끝나지 않았어도 하단 부분이 진행이 될겁니다.

(현재는 없지만요. getMovies 밑에 log찍어보면 알수있습니다.)

await을 써서 json을 return 할때까지

setState를 하지않습니다.

(이게 중요합니다.)

async, await를 해놓지 않으면

getMovie 함수를 호출하고 api를 불러와도

처리하는 동안 이미 setState는 진행되어 반영이 되지않을겁니다.

그러니까!

await를 해서!(promise~)

json을 return 할때까지 기다려줘!

라는 것이죠!

맨 처음 웹페이지 진입시 render가 되고

componentDidMount()를 호출합니다.

그러면서 _getMovies에 진입

_callApi 진입

근대 DidMount 끝! 이 나옵니다.

(비동기라서 getMount가 뭔 일을 하고있던 걍 밑에 코드가 진행된걸 확인 한겁니다.)

(또 setState가 더 늦게 나왔습니다. await로 json을 넘겨받길 기다리고 있다가 넘겨받고 시작된거기 때문이죠!)