[React] Async 와 Await

Async/Await란?

개념

• Async/Await은 JavaScript에서 강력한 기능으로 비동기 프로그래밍을 간편하고 가독성 있게 작성할 수 있도록 해준다.
• React에서는 async/await을 사용하여 API로부터 데이터를 가져오거나 HTTP 요청을 수행하는 등의 비동기 작업을 처리할 수 있다.

왜 사용하는지

가독성

• Async/await을 사용하면 비동기 코드를 동기적으로 작성하여 가독성을 높일 수 있다.
• 코드의 흐름을 이해하기 쉽고 따라가기 쉽게 만들어준다.

에러 처리

• Async/await은 try-catch 블록을 사용하여 에러 처리를 간편하게 할 수 있다.
• 비동기 작업 중 발생하는 에러를 쉽게 잡아내고 처리할 수 있다.

순차적 작업

• Async/await은 이전 비동기 작업이 완료될 때까지 기다린 후 다음 작업을 수행할 수 있도록 해준다.

언제 사용하는지

• Async/await은 React 컴포넌트 내에서 API로부터 데이터를 가져오거나 비동기 결과에 기반하여 상태를 업데이트하거나 부작용을 수행하는 경우에 사용된다.

어떻게 사용하는지

• React에서 async/await을 사용하기 위해 async 함수를 정의하고 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다린다.

예시 1 : API로부터 데이터 가져오기



위 예시에서는 fetchData 함수를 async 함수로 정의한다.
await 키워드를 사용하여 fetch 요청과 응답의 파싱이 완료될 때까지 기다린다.
가져온 데이터는 setData를 사용하여 컴포넌트의 상태에 저장된다.

예시 2: 순차적 작업 수행



위 예시에서는 performOperations 함수가 await을 사용하여 세 개의 비동기 작업을 순차적으로 수행한다.
작업을 시작하기 전에 로딩 상태를 true로 설정하고 모든 작업이 완료되면 false로 설정한다.

Async/await을 사용하면 React 컴포넌트에서 깔끔하고 가독성 있는 비동기 코드를 작성할 수 있으며,
API 호출, 데이터 가져오기, 기타 비동기 작업을 간편하게 처리할 수 있다.
에러 처리도 간편하게 할 수 있고, 순차적인 작업도 쉽게 수행할 수 있다.