질문
비동기 함수를 왜 굳이 동기처럼 실행시키기 위해 await을 사용하는 건가요? 처음부터 함수를 만들때 동기로 만들면 되는거 아닌가요?
동기, 비동기가 잘이해가 안가네요..
답변
안녕하세요 이정환입니다.
자바스크립트에는 다음과 같은 내장 비동기 함수들이 존재합니다.
fetch
: 서버로부터 데이터를 받아오는 API 호출을 해주는 함수setTimeout
: 특정 시간 이후 콜백함수를 실행시켜주는 함수setInterval
: 특정 시간 마다 틱을 발생시켜 콜백함수를 주기적으로 실행시키는 함수
이런 함수들은 모두 Promise
를 반환하기 때문에
자동으로 비동기적으로 동작하게 됩니다.
그런데 가끔 우리가 코드를 작성하다보면, 이런 비동기 함수의 결과값들을 바로바로 이용하고 싶을 때가 있습니다.
예를 들면 다음과 같은 상황이 있을 수 있죠
- fetch를 이용해 A서버로부터 배열 형태의 게시글 데이터를 불러오기
- 데이터를 불러왔다면 특정 조건을 이용해 필터링 하기
이때 2번 동작을 실행시키기 위해서는 1번 동작이 끝난 다음에, 결과값을 받아와 실행시켜줘야 합니다.
그런데 1번 동작이 비동기적으로 동작하기 때문에 이를 동기적으로 처리하기가 어렵습니다.
따라서 위와같은 경우에 async, await 키워드를 이용해 다음과 같이 동기적으로 직관적으로 코드를 작성할 수 있습니다.
COPYasync function getDataAndFiltering(){ // 비동기 작업 : 1번에 해당함 const data = await fetch(...).then((res)=>res.json()); // 동기 작업 : 2번에 해당함const filteredData = data.filter(...); return filteredData; }