동기적(Synchronous) vs 비동기적(Asynchronous)

동기적(Synchronous)

어떤 작업을 요청했을 경우 그 작업이 종료될때까지 기다린 후 다음 작업을 수행하는 방식

 

비동기적(Asynchronous)

어떤 작업을 요청했을 경우 그 작업이 종료될때까지 기다리지 않고 다른 작업을 하고 있다가 요청했던 작업이 종료되면 해당 작업에 대한 추가 작업을 수행하는 방식

 

비동기적 처리를 사용하는데 주로 사용되는 함수와 문법

 

1. callback

콜백 함수는 특정 함수가 끝난 다음에 어떤 작업을 진행하고 싶을 경우 콜백 함수를 사용한다. 사용 방법은 특정 함수의 파라미터로 콜백 함수를 작성하여 넣어주면 된다.

 

const CallBack = () => {
    const callbackAcceptingFunction1 = (fn) => fn(1, 2, 3, 4);
 
    const callbackAcceptingFunction2 = (fn) => fn(4, 2, 1);
 
    const callback = (arg1, arg2, arg3) => arg1 + arg2 + arg3;
 
    const result1 = callbackAcceptingFunction1(callback);
    console.log(result1);
 
    const result2 = callbackAcceptingFunction2(callback);
    console.log(result2);
 
    return (
        <div className="CallBack">
            <p>CallBack</p>
        </div>
    );
};
export default CallBack;
 

 

 

2. Promise

promise는 ES6문법에서 도입된 문법으로 기존의 callback함수의 가독성을 개선시켜 나온 문법이다.

promise는 두 개의 파라미터를 받고 각각 성공의 경우와 실패의 경우를 각각 나눠 어떤 작업을 실행할지 정재주는 문법이다. 

 

promise의 장점으로는 비동기 작업의 개수가 많아져도 가독성이 떨어지지 않는다는 점이다. 

단점으로는 오류가 발생했을 경우 발생위치를 알기가 힘들고 까다롭다.

 

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('Hello ');
        resolve('World!');
        reject('Error!');
    }, 2000);
});
 
promise
    .then((response) => {
        console.log(response);
 
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('JavaScript Programming');
                resolve('~~!!~!');
            }, 1000);
        });
    })
    .then((response) => console.log('Success'))
    .catch((error) => {
        console.log(error);
    })
    .finally(() => {
        console.log('Promise: 나는 무조건 실행된다');
    });
 
const PromiseTest = () => {
    console.log('PromiseTest Start');
 
    console.log('PromiseTest Fin');
    return (
        <>
            <div className="PrimiseTEst">
                <p>PromiseTest</p>
            </div>
        </>
    );
};
export default PromiseTest;
 

 

3.async/await

async/await 문법은 ES8 문법에서 추가된 문법이다. 기존의 Promise문법을 보완해서 나온 문법이다. 

해당 문법을 사용하기 위해서는 함수 앞부분에 async라는 키워드를 입력하여 해당 함수가 비동기 함수라는 것을 선언해줘야 한다. 그런뒤 내부의 Promise의 앞부분에 await키워드를 사용하여 해당 작업이 끝날 때 까지 기다렸다가 다음 작업을 실행한다는 것을 아려줘야 한다. 해당 문법에서 에러가 발생할 때는 try/catch문을 사용하여 에러를 잡을 수 있다.

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어