[React JS] Await Async in React

지난 시간에 작성한 코드▼

Await,Async는 지난 시간에 작성한 코드들을 좀 더 분명하게 작성해주는 도구이다.

우리가 영화들을 state에 올리려면, 아래와 같은 작업을 해야한다.

애플리케이션이 크면, then 안에 then으로 이어지면서 세련되지 않는다.

.then이 많아지면서 CALLBACK HELL 이 되버린다.

즉 then,then,then.. 많아져서 길을 잃어버리는 것이다.

그래서 여기서 sync,await 이라는 것을 쓸것이다.

이 강좌에서는 어떻게 쓰는지만 알려줄 것이다.

이것 대신에 새로운 function을 만들거다.(getMovies)

그리고 새로운 function을 쓸꺼다.(call api)

그리고 기존에 componentDIdMount 에서 사용된 코드들을 복사해서

_callapi function에 넣을 것이다.

기존에 componentDidMount는 코드를 다 삭제한 후 

this._makeMovies(); 이렇게 작성해준다.

왜 이렇게 하는가??

사이즈가 크면 좋은 코딩방법이 아니다.

왜냐하면 많은 function을 불러올껀데

다 한군데에 몰아 있는 것보다는, 작은 function들이 각기 다른 자리에 있는 것이 좋다.

그 다음은 async라는 것을 할꺼다.

이건 지난 시간에 설명했다.

async는 이전 작업이 끝나야 그 다음 작업이 시작하는 형태가 아니다.

순서와 상관없이 작업이 진행된다.

function getMovies는 asynchronous function 이라고 할 수 있다.

 asyn _getMovies = () => {

   

 }

이 코드안에 await라는 것을 쓸꺼다.

그리고 새로운 variable을 쓸꺼다.

자 이제 코드를 살펴보자.

did mount 하고 나면, get movies를 할꺼다. 그리고 이건 async function인데 

movies 라는 variable을 갖고 있다.

그리고 이건 value를 갖고 있어. 무엇이냐면, call api라는 function을 await 모드에서!

그렇다면 await는 무엇인가?

현재 코드를 살펴보면,

내가 await으로 하는 것은, call api 기능이 끝나는 것을 기다리고,

'끝나기를' 기다리는 거야, '성공적으로 수행'이 아니라,

call api의 return value - 그 것이 무엇이든,

그 value를 movies에 넣을거야.

작업이 완료하면, 성공이됫든 실패가 됫든,

call api 작업후에 

this.setState({

     movies

   })

이 코딩이 실행될 것이다.

이를 하는 방법은 _callApi 에 

첫번째 줄에 fetch라는 이름의 promise를 return 할 것이다.

제이슨을 return하는 대신에, 콘솔로그 하는 대신에,

data.movies를 return 할 것이다.

 그리고 => 이 화살표는 모던 자바스크립트이다.

이 화살표기능 자체에 return이라는 뜻이 내재되어 있다.

그리고 저장을 하면 아마 오류가 뜰것이다.

왜냐하면 실수했기 때문이다 

이렇게 수정하고 저장하면 된다.

그러면 영화 제목들이 정상적으로 출력되고는 있지만,

포스터가 출력이 안되고 있다.

우리가 저번에 작업할때, 포스터는 필요한 항목이라고 적었는데, value가 'undefined' 되어있다.

왜냐하면, movie 오브젝트가 변경되었기 때문이다.

일단 콘솔로그를 살펴보자.

다시 한번 느끼지만, 정말 데이터가 잘 정리되어있다.

내가 여기서 가지고 오고 싶은 데이터를 입력하면 가져오니, 정말 신기하다.

이렇게 수정해주면, 아래와 같은 리스트들이 출력된다.

오늘 했던 것을 정리해보자면,

첫번째 작업, fetch를 call api로 변경했다.

그 다음, get movies라는 function을 썼다.

get movies는 astnchronous function이다.

그 안에 movies라는 이름의 const variable을 생성했다.

그리고 call api 작업이 완료되고 return 하기를 await 했다.

call api는 fetch promise를 return 할 것인데, 이는 모든 데이터의 제이슨이다.

그 안에 movies가 있는, data라는 이름의 오브젝트와 함께 말이다.

그래서 json.data.movies 라는 value는, const movies의 결과값이 되는 것이다.

그리고 나의 컴포넌트의 state을 movies로 set 한 것이다.

state 안에 movies가 있으면, render movies라는 function을 불러올거야.

그리고 render movies는 movies라는 const를 불러오는데,

이는 영화타이틀,그리고 포스터 순으로 맵핑을 한다.

여기서 ket = index를 바꿔보도록 하자. ket는 인덱스일 필요가 없다.

key는 영화의 id이어도 됨

왜 id를 사용하느냐?

컴포넌트의 ket는 인덱스를 사용하는 것은 느려서 좋지 않다.

주의사항은 async를 안쓰면 await는 작동을 안할것이다.

오늘의 최종 소스 app.js ▼

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