React숙련주차16(비동기 프로그래밍)

🔴비동기 프로그래밍

🔴Promise 객체

---

비동기 프로그래밍

동기(synchronous)적 방식이란
현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식(앞선 코드가 끝나야만 그 다음 코드가 수행)

비동기(asynchronous)적 방식이란
실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
1. setTimeout, addEventListner 등
2. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
3. 대표적으로 서버 통신과 관련된 로직들 포함

 

콜백지옥

콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우
주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
뭐가문제? 가독성, 수정도 어려움

이를 해결하기 위해서 ES6에서 Promise 객체가 소개되어짐
(앞으로 비동기 프로그래밍을 다룬다는 것은 곧 Promise 객체를 다룬다는 의미와 일치한다고 보셔도 무방)

 

Promise 객체

비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

 

> 어떤 데이터를 받아야 이 동작을 하고 그 동작을 하면 또 어떤 값이 필요하고 이런 걸 약속처럼 생각하는 것이고, 이 약속에 관련된 사항들이 모두 promise객체에 담기는 것이다.

 

💫promise 객체에 담기는 주요한 상태정보

1. 대기 : pending, localhost에서 네이버에 요청한 직후. 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태죠. 
2. 이행 : fulfilled, 네이버가 정상적으로 데이터를 localhost한테 전달을 성공적으로 해준 상태에요.
3. 거부 : rejected, 어떠한 이유인지는 모르겠지만 네이버가 localhost에게 데이터를 전달을 못해준 경우에요. 

>promise 객체가 갖는 주요한 상태정보 3가지에 따라, 우리는 적절한 처리를 해줘야 사용자가 편하게 사용할 수 있는 것이다.

---

# then ~ catch(ES6)

// http://api.naver.com/weather/today 로 요청을 한다고 가정합시다.

axios.get('http://api.naver.com/weather/today')
.then(response => {
	console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {
	console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{
	console.log('항상 실행되는 부분입니다!');
});

 

# async / await(ES7)

const getWeather = async () => {
	try {
		const response = axios.get('http://api.naver.com/weather/today');
		console.log('정상처리 되었습니다 : ' + response);
	} catch (error) {
		console.log('오류가 발생하였습니다 : ' + error);
	}
}

 

코드를 짤때는 순서가 중요하다. 비동기적으로 운영된다고 했을때 어떤 한 부분에서 오류가 난다면 그 오류에 대해 어떻게 대처하고 다음 코드를 이어가야할지가 중요하다. 작동을 멈출 수는 없으니까