리액트 정리 2(24/06/25)

비동기처리 다루기

1.  비동기 처리란?

비동기 처리를 하는 이유?

동기(Synchronous)란 요청과 응답을 받는 시기가 일치한다는 것

- 요청을 처리하는 속도는 작업마다 모두 다를 수 있기 때문에 비동기(Asynchronous)가 필요함

비동기란?

비동기(Asynchronous) 작업을 기다리고 있지 말고 그 동안 처리할 수 있는 일을 해놓는 것을 의미함

 

* 요청한 내용을 언젠가 응답해 주겠다고 약속(Promise)를 해놓은 상태에서 그럼 다른 일을 먼저 하자는 것.

 

JS에서 비동기작업을 하는 방법?

비동기작업의 방법들

다양한 방법이 있지만 이번에 설명 할 3가지 방법은

- Callback (함수)

- Promise (객체)

- async / await (키워드)

다음과 깉이 있다.

 

1. 콜백함수

- 콜백함수란? 나중(특정지점)에 호출하는 함수로, 함수의 인수로 호출되는 함수이다.* 예시 코드

function printMe() {
	console.log("Hello World!");
}
setTimeout(printMe, 3000); // JS의 내장 비동기 함수
console.log("대기 중...");

이 코드는 3초뒤 콜백함수로 인해 "대기 중..."이 뜨고 "Hello World!"가 출력된다.

 

2. Promise 객체

Promise의 개념

- Promise란? Promise는 JS 비동기 처리에 활용되는 객체이다

* 생성부터 종료까지 3가지 State(process)를 갖는다

 

Promise의 상태 3가지

상태	설명
Pending(대기)	비동기 로직 처리의 미완료 상태
Fulfilled(이행)	비동기 로직 처리가 완료된 상태. Promise 결과값 반환
Rejected(실패)	비동기 로직 작업 실패 또는 오류

 

Promise 사용 문법

Promise의 문법은 다음과 같다

const promise 객체변수 = new Promise((resolve, reject) => {
	const 결과 = 실행코드;
    if (reject 조건) {
    	return reject(에러객체); //에러 반환
    }
    resolove(결과); // 성공처리
});
return promise객체변수

 

3. async / await란?

개념

async와 await는 Promise를 더 쉽게 사용하기 위한 문법이다

* 어떤 결과(resolove) 부분에서 실패가 일어났는지 파악이 쉬움

 

실질적으로 비동기 작업이 필요한 함수 앞부분에 async 키워드를 추가하고,

해당 함수 내부의 Promise 앞부분에 await 키워드를 사용하면 된다

 

문법

async 타입: Fulfiled(이행) Promise를 반환

async function 비동기작업함수() {
	try {
		반복 {
        	let 결과 = await 프로미스리턴 함수;
        }
	} catch (e) {
    
    }
}

이렇게 하면 Promise가 끝날 때까찌 기다리고, 결과 값을 특정 변수에 담을 수 있다.

// Promise style
const users = () => {
	getData()
    	.then(users => {
        	console.log(users);
            return users;
       }) 
       .catch(error => {
       		console.log(error);
       });
	// async/await style
    const user = async() => {
    	console.log(await getData());
        return await getData();
    }
}

async를 함수 앞에 붙이면 Fulfiled Promise를 반환한다.

그리고 await를 붙인 Promise는 Promise를 리턴하지 않게 된다.