리액트 비동기처리

📖 비동기 처리의 개념

간단하게 말하면 일을 시키고 결과가 나오기전에 다른일을 먼저하고있기 이다.
쉽게 예를들어서 설명하면

동기란

라면을 끓이고 있는 동안 계속 냄비만 바라보는 것
-> 물이 끓기 전엔 아무것도 못함.

비동기란

라면을 끓이는 동안 다른 일을 하다가, 물이 끓으면 알려달라고 해놓는 것
-> 물을 끓이는 동안 다른 일을 함.

기본으로 동기적으로 실행되지만
• 버튼 클릭
• 이미지 로딩
• API 요청
등등의 요인으로 인하여 비동기처리가 필요하다.

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

🤙 Callback

Callback 이란?
-> “나중에 호출될 함수” 를 매개변수로 넘기는 함수
쉽게말해서 그냥 이 함수 실행하고 그 다음으로 실행할 함수를 Callback 함수라고 한다.

왜 사용해?
“비동기적인 작업의 완료 시점에 맞춰 원하는 작업을 실행하기 위해” 사용된다.

어떻게 써?

// 동기적인 콜백함수 활용
function greet(name, callback) {
  console.log("안녕 " + name + "!");
  callback();  // 나중에 실행됨
}

function sayBye() {
  console.log("잘 가~");
}

greet("철수", sayBye);

/* 출력
	안녕 철수!
	잘 가~
*/

// 비동기적인 콜백함수 활용
function fetchData() {
  setTimeout(() => {
    console.log("🛬 데이터 도착!");
  }, 2000);
}

console.log("1. 요청 보냄");
fetchData();
console.log("2. 다음 작업");
/*출력
	1. 요청 보냄
	2. 다음 작업
	🛬 데이터 도착!
*/

단점: 콜백 지옥(callback hell) → 가독성↓, 디버깅 어렵
그렇기에 지금은 비동기처리로 Callback 보다는 Promise 와 Async/await 을 더 많이 사용한다.

🐣 Promise (객체)

• Promise 객체란
  Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
  쉽게말해서 "나중에 어떤 값이 도착할 거니까, 도착하면 .then()으로 그 값을 써줘!" 라고 할 수 있다

• Promise 상태 3가지
  대기 : 아직 결과가 결정되지 않은 초기 상태.
  성공 : 작업이 성공적으로 완료되어 결과값을 반환한 상태.
  실패 : 작업이 실패하거나 오류가 발생한 상태.
  흐름 :대기(Pending) → 성공(Fulfilled) or 실패(Rejected)

• Promise 사용 문법과 기본예제
  기본문법

  const myPromise = new Promise((resolve, reject) => {
  	// 비동기 작업 수행	
    if (성공조건) {
      resolve(결과값);
    } else {
      reject(에러메시지);
    }
  });

비동기 작업을 수행하는 코드를 넣고 성공했을때와 실패했을때를
정의하여 넣어줍니다.

예제

function checkEvenNumber(num) {
  return new Promise((resolve, reject) => {
    if (num % 2 === 0) {
      resolve(`${num}은 짝수입니다.`);
    } else {
      reject(`${num}은 홀수입니다.`);
    }
  });
}

checkEvenNumber(4)
  .then((res) => console.log(res))   // 4은 짝수입니다.
  .catch((err) => console.error(err));

.then과 .catch 를 이용하여 성공했을때 수행과 실패했을때의 수행을 명시해줍니다.

🐴 Async/await (키워드)

• Async/await 의 역할
  • Promise 를 더 간결하고 직관적인 방식으로 다루기 위해 나온 문법
  • then/catch 체인 없이도 비동기 처리 흐름을 동기처럼 읽을 수 있음
  

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

기본 문법

async function 함수이름() {
  try {
    const result = await 비동기함수();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

예제

async function check() {
  try {
    const result = await checkEvenNumber(3);
    console.log(result);
  } catch (error) {
    console.error(error); // 3은 홀수입니다.
  }
}

check();