[React] 동기와 비동기

본격적으로 리액트에 들어가기 앞서 다시 한번 상기하는 공부.

동기

• 여러 개의 작업을 순서대로, 하나씩 처리하는 방식이다.
• JavaScript는 기본적으로 “동기적”으로 코드를 실행한다.
• 동기 방식에는 치명적인 단점이 존재한다.
  • 자바 등 다른 언어에서는 ‘멀티쓰레드’ 방식으로 오래 걸리는 작업이 중간에 포함되어 있더라도 해당 작업이 프로그램 전체 성능에 큰 영향을 주지 않도록 동기 방식의 단점을 어느정도 보완한다.
  • 그러나 자바스크립트 엔진에는 쓰레드가 1개 밖에 없다. 그래서 ‘비동기’ 방식으로 해결한다.

비동기

• 작업을 순서대로 처리하지 않는 방식이다.
• 여러 개의 작업이 주어졌을 때 앞선 작업이 끝나지 않았어도 다음 작업을 동시에 실행시킨다.
• 비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행 된다.
  • 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) : 비동기 작업이 성공적으로 마무리 된 상태 (resolve)
  • 실패(Rejected) : 비동기 작업이 실패한 상태 (reject)

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

    return promise;
}

add10(0)
.then((result)=>{
    console.log(result);
    return add10(result);
})
.then((result) => {
    console.log(result);
    return add10(undefined);
})
.then((result) => {
    console.log(result);
}).catch((error) => {
    console.log(error);
});

// then 메서드
// -> 그 후에
// promise chaining 이라고 한다.

 promise
 .then((value) => {
     console.log(value);
 })
 .catch((error)=>{
     console.log(error);
 });

 

비동기 작업 처리하기 3. async/await

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

async function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name: "이진주",
                id: "jinju",
            });
        }, 1500);
    });
};

// await
// async 함수 내부에서만 사용이 가능 한 키워드
// 비동기 함수가 다 처리되기를 기다리는 역할

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

printData();

 

출처 : 한입 크기로 잘라 먹는 리액트