React 부록 async, await, arrow function(1편)

 

짱 편해보여 꼭 사야지 아니다 샌들살까

 

이제껏 강의를 들으면서 잘 모르고 넘어간 것들 제목에 쓰여있는 3가지를 오늘 정리 + 이해해 볼 것이고

지금부터는 내가 직접 코드 작성하고, 파일도 분할해야 하기에 어떤 기능을 위해 쓰였는지 왜 이렇게 작성되었는지

알아야 해서 정리한다 가보자.

 

아 그리고 여러 블로그, 공식 사이트를 참조했지만 대부분의 내용은 이 두 분의 글을 통해 이해했다.

여러 가지 프런트엔드 관련 좋은 글이 많으니 심심하거나 궁금한 게 있으면 들어가서 보도록 하자.

 

https://joshua1988.github.io/

캡틴판교

https://velog.io/@change

change (Change) - velog

---

async, await를 이해하려면 비동기 처리, promise나인 그리고 콜백 함수에 대한 이해가 있어야 한다 해서

나같이 말 잘 듣는 코린이의 경우 곧장 비동기 처리, promise와 콜백 함수에 대해 이해하기로 했다. 점점 배울게 늘어날 거 같은데..?

 

비동기 처리부터 알아보자

 

비동기식 - 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하려는 특성

당연히 동기식은 이와 반대로 하나가 다 완료되어야지 다음 코드가 실행된다.

즉, 코드의 실행에 있어 순서가 확실하게 있고 없고 차이가 존재한다.

 

자바스크립트는 기본적으로 비동기적으로 동작하는데 비동기식으로 동작하는걸 동기적으로 바꿔야 하는 상황이 생긴다.

이때 하는 것을 비동기 처리라고 한다.

 

그리고 이 비동기 처리를 사용하는 자바스크립트의 예시로 3가지가 있다.

1. 콜백 함수
2. Promise
3. async / await

콜백 함수 예시 출처:  https://velog.io/@change/JavaScript-asyncawait% EC%97%90-%EB% 8C%80% ED%95% B4% EC%84%9C

[JavaScript] 비동기 처리에 대하여

1. 콜백 함수

1비슷해보이지만 다른 두 친구 한번 비교해보자.

왼쪽 친구를 먼저 보면 맨 밑줄에서 두 번째 줄 callHello함수를 실행하면

value라는 변수는 log 2 개를 거친 후, setTimeout을 통해 3초 뒤 Hello라는 string값을 갖게 된다.

하지만, 그 3초 전에 printString을 통해, r의 값은 배정받지 못한 채로 출력된다.

 

결과를 보면  log 2개, 그리고 undefined 배정받지 못한 r의 값이 출력되고  setTime아웃이 3초 동안 기다렸다가 value의 값을 Hello로 만들고 끝난다. 

 

✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌✌(-‿-)✌

 

이번에는 오른쪽을 보자. (콜백 함수를 사용한 예) 비슷하다.

다만 아까 callHello에 해당하는 함수인 callPrint에서는  callback을 매개변수로 받고 이 함수는 밑에 있는 setTimeout에서 value가 Hello로 바뀐 뒤, value를 인자로 갖는 callback함수를 실행하게 된다.

 

실행을 하면, callPrint함수가 printString함수를 인자로 받고 실행된다. 

value라는 변수 생성, log 2개 실행,  setTimeout에서 3초 뒤에 value는 Hello라는 값을 가지고,

printString(value)가 실행되면서 log는 Hello값을 출력 즉 아까와 똑같이 setTimeout을 통해 3초 뒤에 함수가 실행되지만

결과적으로 우리가 원하는 value에 Hello값을 넣고 출력하는 방식을 만들었다.

 

근데 실제 업무, 개발에서는 콜백 지옥이라고 하는 더 복잡한 코드 작성 시 머리가  깨질 정도로 콜백 관계가 복잡해진다고 한다.

이럴 경우 가독성 하락, 에러 처리 까다로움이 생겨 새로운 방법인 Promise 객체를 사용한다고 한다.

 

2. Promise🤙

promise를 사용하면 비동기 작업이 종료된 후, 성공의 결과(그 값), 실패에 대해 처리할 수 있다고 한다.

그리고 promise에서는 3개 중 하나의 상태를 가진다 대기, 이행, 거부 각각 초기 상태, 연산 성공+완료, 실패를 의미한다.

 

new Promise() 객체를 생성해 콜백 함수를 선언하는데 이때 인자는 resolve, reject를 사용함.

인자 두 개는 각각 결과가 성공, 실패인 Promise객체를 반환한다.

반환된 Promise객체를 성공 시, then을 통해, 실패 시 catch를 통해 처리한다. 무슨 말인지 예시를 보자.

 

각각 성공과 실패예시

왼쪽의 예시부터 보면 new Promise 객체 내에 위에서 본 setTimeout을 통해 3초 뒤 성공 시에 Success!라는 문구를 반환한다.

myFisrstPromise함수 뒤에. then을 붙여  successMessage에 반환한 Success! 를 갖고 log를 통해 출력된다.

 

오른쪽은 실패가 된 예시 reject를 통해 결과가 실패인 객체를 반환하고 아까 then과는 다르게 처리해줄 catch를 추가한다.

성공할 경우 yay! 와 받은 succesMessage를 출력하지만, reject를 통해 Error :Fail! 을 가져와 결과를 보면 catch를 통해

log를 실행시킨다.

 

이렇듯 promise를 사용 시 단순 콜백 함수만을 사용했을 때와 다르게. then을 연결시켜 간단하게 표현이 가능하다(콜백 지옥 탈출)

 

3. Promise를 이용한 async, await

결국, 여기까지 오기 위해 위에 것들을 이해하고 정리한 것인데, 가장 큰 차이는 resolve, reject, catch, then을 쓰지 않는다고 한다. 

이 4개를 사용하지 않고 어떻게 비동기 처리를 하는지 보자.

 

음 이제야 좀 익숙한 친구들 보이네 반가워

new로 Promise객체를 새로 만들 필요도 없이 그냥 보이는 것처럼

async만 메서드 앞에 붙이면 반환되는 값이 Promise객체가 된다. 

 

async를 통해 만든 hello()에서는 Hello string이 Promise객체로 반환되고 callHello함수에서 이 반환 값을 r에 저장한다.

보통 우리가 필요한 건 Promise { 'Hello' }가 아닌 Hello string자체가 필요한데 이때 사용하는 것이 await이다.

await사용 예시를 보도록 하자.

 

제일 먼저 눈에 들어오는건 await랑 아까랑은 다르게 async가 붙은 callHello함수

아까는 그냥 r에 hello() 반환 값을 넣어다면 지금은 앞에 보라색 await가 추가되었다.

await가 붙을 시 Promise 객체에서 실제의 반환 값 지금의 경우 String값을 뽑아낸다.

그리고 async가 callHello함수 앞에 붙은 건 await가 async가 붙은 메서드에서만 사용 가능하기 때문이란다.

 

Promise에서 성공, 실패에 따라 then, catch를 통해 결과를 받은 것처럼, async에서도 필요하다. 조금 더 간단하다.

왼쪽은 성공 처리 오른쪽은 실패 처리이다.

 

then은 try로 바뀌었고 catch는 그대로 쓰인다.

성공 처리 예시부터 보면 try 안에 hello함수의 반환 값을 await를 통해 string 만가 져 오고 log를 통해 출력하는 경우

실패 예시의 경우 catch가 실행되어 hello함수의 반환 값인 Error:Fail! 을 가져와 message파트인 Fail!을 출력한다.

 

여기까지 이제 내가 실제로 쓴 await/ async 어떻게 이용했는지에 대해 알아보자

 

이제는 이해가 가능할까?

getMovies라는 함수를 만들고 async를 통해 fetch를 통해 movieApi를 가져오고

awiat가 Promise가 묶인 상태가 아닌 값 자체로 가져오고, 그 값을 json에 변수에 넣는다.(여기에도 await)

json형태로  이 응답을 파싱 하고,  밑에 setMovies는 여기 캡처에는 없지만 state의 movie정보를 넣는 함수

제목, 평점, 러닝타임, 장르 등 다양한 걸 넣을 것이고 이게 완료되면 밑의 함수 setLoading,

api 데이터를 가져 올 동안 Loading을 보여주는 함수로 false값으로 state 값을 바꿔 없앤다.

 

밑에 있는 useEffect는 처음에만 getMovies함수를 실행시켜라 이 의미이다.

 

여기까지 arrow function은 다음 시간에

 

알 거 같은데 모르는 내용이 아니라 강의를 들으면서도 이게 무슨 의미의 코드지? 여기서는 왜?. 을 왜 붙일까 하는 의문들나중에 해결해야지, 알아봐야지 하다가 결국 내가 만들고 수정하는 부분에서 어려움을 겪어 찾아보게 되었다.결국에는 찾아볼 거, 미리미리 궁금증이 생기면 바로 찾거나, 나중에 찾도록 기록하는 습관을 들이자.