[React] 비동기처리란? async와 await

프론트엔드/React

순코딩 2023. 12. 24. 00:55

What

비동기 처리란?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

Why

왜 비동기 처리 특성을 갖는가?

클라이언트에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데

응답을 줄 때까지 다른 코드를 실행 안 하고 계속 기다릴 수는 없기 때문이다.

예로 만약 클라이언트에서 서버에 보내는 요청이 100개일 경우에 비동기 처리가 아니고 동기 처리 방식이라면 데이터 요청과 응답 대기를 반복하여 실행 속도가 느려질 것이다.

How

어떻게 해결하는가?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이 있다.

이는 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완해 가독성이 좋고 코드 이해가 직관적이다.

async/await 사용방법

// 예시 코드1
async function 함수명() {
  await 비동기_처리_메서드_명();
}

// 예시 코드2
함수명 = async() => {
  await 비동기_처리_메서드_명();
}

1. 함수의 앞에 async 라는 예약어를 붙인다.

2. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다.

주의사항

비동기 처리 메서드(await를 붙인 함수)가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다.

즉, 서버와 통신에서는 꼭 사용해야 하며 서버와의 통신에서만 사용해야한다.

참고자료

자바스크립트 비동기 처리와 콜백 함수

(중급) 중급 자바스크립트 개발자가 되기 위한 자바스크립트 비동기 처리와 콜백 함수 이해하기. 콜백 지옥과 해결 방법 등

joshua1988.github.io

자바스크립트 async와 await

(중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법

joshua1988.github.io