리액트의 비동기 처리

코딩/리액트

리액트의 비동기 처리

박강원입니다 2024. 6. 3. 06:55

동기(synchronous)는 요청과 응답이 동시에 이루어진다는 것을 의미한다. 그러나 각 작업의 처리 속도가 다를 수 있기에, 앞선 요청을 모두 처리할 때까지 기다려야 하는 동기 방식 대신 비동기(asynchronous) 방식이 필요하다. 비동기는 요청을 기다리지 않고 그 동안 다른 일을 처리할 수 있게 해준다. 더 자세히 말하자면, 요청한 내용에 대해 나중에 응답하겠다는 약속(Promise)을 해놓고 그 동안 다른 작업을 진행하는 것을 의미한다.

JS에서 비동기작업을 다루는 방법 세가지

1. 콜백 함수(Callback Functions):

- 나중(특정 지점)에 호출하는 함수로, 함수의 인수로 호출되는 함수

- 특정 작업이 완료된 후 실행될 함수를 미리 등록해 두는 방식

- 콜백 지옥(callback hell) 문제를 일으킬 수 있음

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

2. Promise:
- 비동기 작업의 완료 또는 실패를 처리하는 객체

- 생성부터 종료까지 3가지 State(process)를 갖는다
- 콜백 함수보다 가독성이 좋고, 체인 형태로 비동기 작업을 연결할 수 있음

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

return promise객체변수

3. Async/Await:
- Promise를 더 쉽게 사용하기 위한 문법(어떤 resolve(결과)부분에서 실패가 일어났는지 파악이 쉬움

- 실질적으로 비동기 작업이 필요한 함수 앞부분에 async 키워드를 추가하고, 해당 함수 내부의 Promise 앞부분에 await 키워드를 사용하면 된다.

- async는 함수의 앞에 붙어서 해당 함수가 비동기 함수임을 나타내고, 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 users = async() => {
    console.log(await getData());
    return await getData();
}
//async를 함수 앞에 붙이면 Fulfiled Promise를 반환한다.

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

Promise (객체)

Promise 객체란?
Promise 객체는 비동기 작업을 처리하기위한 객체로, 비동기 작업이 성공적으로 완료되었는지, 실패했는지 나타내는 값을 가질 수 있다.

Promise 상태 3가지
1. Pending (대기):
   - 초기 상태로, 비동기 작업이 아직 완료되지 않은 상태이다.
2. Fulfilled (이행):
   - 비동기 작업이 성공적으로 완료된 상태로, 결과값을 가지고 있다.
3. Rejected (거부):
   - 비동기 작업이 실패한 상태로, 실패 이유를 가지고 있습니다.

Promise 사용 문법과 기본예제

사용 문법

// Promise 객체 생성
let promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행

  // 성공 시
  resolve(value); // 비동기 작업 성공 시 호출

  // 실패 시
  reject(reason); // 비동기 작업 실패 시 호출
});

// then 메소드: Promise가 성공했을 때 호출될 콜백 함수 등록
promise.then(value => {
  // 성공 시 처리할 코드
}).catch(reason => {
  // 실패 시 처리할 코드
}).finally(() => {
  // 성공/실패 여부와 상관없이 항상 실행될 코드
  // 보통은 finally를 자주 사용하지는 않는다.
});

기본예제

let homeworkPromise = new Promise((resolve, reject) => {
  let didHomework = true; // 숙제를 했는지 여부를 나타내는 변수

  if (didHomework) {
    resolve("숙제를 다 했어요!"); // 숙제를 다 했으면 resolve 호출
  } else {
    reject("숙제를 안 했어요."); // 숙제를 안 했으면 reject 호출
  }
});

// 숙제를 다 했을 때와 안 했을 때의 처리를 정의
homeworkPromise.then((message) => {
  console.log(message); // "숙제를 다 했어요!" 출력
}).catch((error) => {
  console.error(error); // "숙제를 안 했어요." 출력
}).finally(() => {
  console.log("숙제 확인이 끝났습니다."); // 항상 실행되는 부분
});

Async/Await (키워드)

Async/await의 역할

- Promise를 더욱 쉽게 사용할 수 있게 해줍니다.

- async는 함수의 앞에 붙어서 해당 함수가 비동기 함수임을 나타내고, await은 비동기 함수의 실행 결과를 기다리는 키워드이다. 이와 같음을 통해 비동기 코드를 동기코드처럼 작성할 수 있기에 가독성이 좋아지고 에러처리가 간단해진다.

Async/await의 기본 문법 및 기본 예제

기본 문법

async function fetchData() {
  try {
    // await 키워드를 사용하여 Promise가 실행될 때까지 대기
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data); // JSON 데이터 출력
  } catch (error) {
    console.error('에러 발생:', error); // 에러 처리
  }
}


fetchData();

기본예제

async function fetchUserData() {
  try {
    // await 키워드를 사용하여 API 호출이 완료될 때까지 대기
    let response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    // 응답 데이터를 JSON 형식으로 변환
    let data = await response.json();
    // 사용자 데이터 출력
    console.log("사용자 이름:", data.name);
    console.log("사용자 이메일:", data.email);
  } catch (error) {
    // API 호출 중 발생한 에러 처리
    console.error('API 호출 에러:', error);
  }
}


fetchUserData();