[React] 비동기 처리 방식 Async & Await (+ Promise)

 

 

 

노마드 코더 강의를 수강하면서 영화 웹을 제작하였다.

영화 API 를 받아오면서 안드로이드에서도 그랬듯이,

비동기 처리 방식으로 영화 데이터를 받아왔다.

 

프로젝트 내에서는 Async 와 Await 를 사용하였지만,

비동기 처리 방식에 대해 검색해보니 이전에는 "Promise" 방식을 사용하였다 한다.

하나씩 차근차근 알아보자. 🎢

 

 

 

---

 

Promise

Promise 는 자바스크립트에서 비동기 처리에 사용되는 객체이다.

 

여기서 말하는 비동기 처리 방식이란,

코드 실행 후 결과를 기다리지 않고 다음 코드를 계속 진행하는 처리 방식을 이야기한다.

 

기본적으로 API 를 만들 때 아래와 같이 코드를 작성한다.

app.get('/product', (response) => {
 / ... /
})

하지만 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥

화면에 데이터를 표시하려 하면 오류가 발생하거나 빈 화면이 뜬다.

 

이와 같은 문제점을 해결하기 위해 나온 것이 Promise 객체이다.

 

 

 

Promise 상태

Promise 의 상태란 " 처리 과정 " 을 말한다.

new Promise() 로 Promise 를 생성하고 종료될 때까지 아래와 같이 3가지 상태를 갖게 된다.

• Pending (대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled (이행): 비동기 처리가 완료되어 Promise가 결과 값을 반환해준 상태
• Rejected (실패): 비동기 처리가 실패하거나 오류가 발생한 상태

 

이러한 Promise 는 다음과 같이 사용한다.

new Promise (function(resolve, reject)) {
	/ ...
    resolve(response);
}

// getData() 메서드는 Promise 객체를 리턴하고,
// JSON 객체가 resolve 된다.
// + 이행 상태가 되면 then() 을 이용해 처리 결과 값을 받을 수 있다.
const users = () => {
    getData()
        .then(users => {
            console.log(users);
            return users;
        })
        .catch(error => {
            console.log(error);
        });
}

 

 

 

---

 

Async & Await

Promise 객체를 통해 비동기 처리를 하는 방법도 있지만,

그의 단점을 해결하기 위해 ES7 에서 async await 키워드가 추가되었다.

이들을 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있다.

 

가장 큰 장점은 코드 품질의 향상 ✨ 이다.

await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있고, 비동기 함수가 리턴하는 Promise 로부터 결과값을 추출한다. await 키워드를 사용하면 일반 비동기처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 때까지 기다려준다. 일반적인 동기 코드 처리와 비슷한 흐름으로 코드를 작성할 수 있다는 것이다.

 

아래는 해당 키워드를 사용하여 영화 데이터를 받아오는 예제이다.

import axios from "axios";

class Home extends React.component {
	state = {
    	isLoading : true,
        movies : []
    };
    
    getMovies = async () => {
    	const movies = await axios.get("영화 사이트 URL");
    	this.setState({ movies: movies, movies, isLoading: false });
        // == this.setState({ movies, isLoading: false });
    }
}

 

추가적으로 async 함수에서 에러를 발생시킬 때는 throw 를 사용하고,

에러를 잡아낼 때에는 try/catch 문을 사용한다.

 

 

 

 

 

© 참고

https://dev-room.tistory.com/61 (React / Promise)

비동기 Promise 의 모든 것

await 와 async 흐름에 대한 설명

[React] Promise