동기와 비동기

동기

여러 개의 작업이 있을 때 작업들을 순서대로 한 번에 하나씩만 처리하는 방식

➡️ 자바스크립트는 "동기"적으로 코드를 실행한다.

➡️ 만약 하나의 작업이 아주 오래 걸린다면, 그 작업이 끝나기 전까지는 다음 작업을 실행할 수 없기 때문에 프로그램 성능이 악화된다. 

➡️ 이러한 문제를 해결하기 위해 자바스크립트에서는 비동기 방식을 사용 ( 자바스크립트 엔진은 스레드가 1개) 

 

비동기

- 동기적이지 않다, 작업을 순서대로 처리하지 않음

- 여러 개의 작업이 주어졌을 때 앞선 작업이 종료되지 않아도 기다릴 필요 없이 다른 작업을 동시에 진행시키는 것이 가능

console.log(1);

setTimeout(()=>{
   console.log(2);
},3000);

console.log(3);

// 1 
// 3
// 2

 

Q. 자바스크립트 엔진은 싱글 스레드라고 했는데 어떻게 동시에 작업을 처리하는가?

A. 비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs(웹 브라우저가 직접 관리하는 별도의 영역)에서 실행된다. 

 

비동기 작업 처리하기

1. 콜백 함수

// 음식을 주문하는 상황
function orderFood(callback){
	setTimeout(()=>{
    	const food="떡볶이";
        callback(food);
    },3000);
}

function cooldownFood(food,callback){
	setTimeout(()=>{
    	const cooldownedFood = `식은 ${food}`;
        callback(cooldownedFood);
    },2000);
}

function freezeFood(food, callback) {
	setTimeout(()=>{
    	const freezedFood = `냉동된 ${food}` 
        callback(freezedFood);
    },1500);
}

// 이게 반복되면 콜백 지옥에 빠지게 된다
orderFood((food) => {
	console.log(food);
    
    cooldownFood(food,(cooldownedFood)=>{
    	console.log(cooldownedFood);
        
        freezeFood(cooldownedFood, (freezedFood)=>{
        	console.log(freezedFood);
        });
    });
});

// 떡볶이
// 식은 떡볶이
// 냉동된 식은 떡볶이

 

2. Promise

: 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체

 

Promise 객체의 3가지 상태

- 대기 (Pending) : 아직 작업이 완료되지 않은 상태

- 성공 (Fulfilled) : 비동기 작업이 성공적으로 마무리 된 상태

- 실패 (Rejected) : 비동기 작업이 실패한 상태

function add10(num){
	const promise = new Promise((resolve,reject) => {
	// 비동기 작업 실행하는 함수
	// executor
    
    setTimeout(()=>{
        if(typeof num==="number"){
        	resolve(num+10); // Promise 객체의 상태 => 성공
        }
        else {
        	reject("num 이 숫자가 아닙니다."); // 실패
        }
    },2000);
   });
   
   return promise;
}

// then 메서드 , 비동기 작업이 성공했을 때만 수행
// => 그 후에
add10(0)
	.then((result)=> {
    	console.log(result);
       	retrun add10(result);
    })
	.then((result)=> {
    	console.log(result);
       	return add10(undefined);
    })
	.then((result)=> {
    	console.log(result);
    })
	.catch((error) => {
    	console.log(error);
    });

 

3. async / await 

// async 
// 어떤 함수를 비동기 함수로 만들어주는 키워드
// 함수가 프로미스를 반환하도록 변환해주는 그런 키워드

async function getData() {
	return new Promise((resolve, reject) => {
    	setTimeout(()=> {
        	resolve({
            	name:"이정환",
                id:"winterlood",
            });
        },1500);
    });
}


// await 
// async 함수 내부에서만 사용이 가능한 키워드
// 비동기 함수가 다 처리되기를 기다리는 역할
// then 메소드를 쓸 필요 없음

async function printData() {
	const data = await getData();
	console.log(data);
}

printData();

 

---

출처

 

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지