본문 바로가기

소프트웨어/Web

[Javascript] Async와 Promise에 대해 간단히

React를 공부하면서 Promise란게 Async보다 진보된 개념인줄 알았는데 거꾸로 알았나보다.

 

Promise가 여러번의 비동기 수행을 위해 .then().then().then().... 등의 nesting을 유발하는 단점을 갖는데, 이를 파훼하는게 Async인 것 같다.

 

아래의 게시물에 잘 설명이 되어있다.

medium.com/@constell99/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-async-await-%EA%B0%80-promises%EB%A5%BC-%EC%82%AC%EB%9D%BC%EC%A7%80%EA%B2%8C-%EB%A7%8C%EB%93%A4-%EC%88%98-%EC%9E%88%EB%8A%94-6%EA%B0%80%EC%A7%80-%EC%9D%B4%EC%9C%A0-c5fe0add656c

 

자바스크립트의 Async/Await 가 Promises를 사라지게 만들 수 있는 6가지 이유

이글은 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)에 대한 번역입니다.

medium.com

 

예제를 따라해보면서 위에 같이 async를 사용하는 코드를 작성했었다. 문법이 생소해서 getMyData가 함수인지 변수인지,,, async()는 왜 =>를 붙이는지 잘 몰랐었는데 아마도 위의 코드를 풀어쓰면 아래와 같은가보다.

 

=>은 화살표함수 라고 명명하는가보다. 아래의 모질라 documentation에서 아주 자세히 설명해주고있다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

화살표 함수 - JavaScript | MDN

화살표 함수 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함

developer.mozilla.org

주로 function과 같이 필요없이 반복되는 구문을 생략하기 위해서 만들어졌나보다.

내가 작성한 예제코드는 aync와 () =>이 붙어있어서 헷갈렸는데, 사실은 async는 async 예약어이고 =>는 function()을 ()로 만들기 위해서 사용된 것 같다.

 

 

:>