[React] 리액트 기초 정리 2

비동기 처리의 개념

비동기 처리(Asynchronous Processing)는 작업이 시작된 후 그 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있는 방식입니다. 즉, 작업이 완료되기를 기다리지 않고 다른 작업을 병행하여 처리할 수 있습니다. 이를 통해 프로그램의 효율성과 반응성을 높일 수 있습니다.

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

자바스크립트에서는 비동기 작업을 다루기 위해 다양한 방법이 있습니다. 그 중에서 가장 일반적으로 사용되는 세 가지 방법은 다음과 같습니다:

1.  콜백 함수 (Callback Function)

   - 특정 작업이 완료된 후 실행될 함수를 미리 등록해 두는 방식입니다.
   - 예시:

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

2.  프로미스 (Promise)

   - 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.
   - 예시:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data fetched');
  }, 1000);
});

promise.then((data) => {
  console.log(data);
});

3.  Async/Await

   - 프로미스를 사용한 비동기 작업을 동기 코드처럼 작성할 수 있게 해주는 키워드입니다.
   - 예시:

async function fetchData() {
  let data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
  console.log(data);
}

fetchData();

Promise (객체)

Promise 객체란

Promise 객체는 비동기 작업의 성공 또는 실패 여부를 나타내는 자바스크립트 객체입니다. 비동기 작업이 완료되면, Promise 객체는 성공(resolve) 또는 실패(reject) 상태가 됩니다.

Promise 상태 3가지

1. Pending (대기): 비동기 작업이 아직 완료되지 않은 상태
2. Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태
3. Rejected (거부): 비동기 작업이 실패한 상태

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

let promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  let success = true;
  if (success) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

promise.then((result) => {
  console.log(result); // "Success"
}).catch((error) => {
  console.log(error); // "Error"
});

Async/Await (키워드)

Async/Await의 역할

Async/Await는 프로미스를 사용한 비동기 작업을 보다 간결하고 이해하기 쉽게 작성할 수 있게 해주는 키워드입니다. `async` 키워드는 함수가 프로미스를 반환하도록 하며, `await` 키워드는 프로미스가 해결될 때까지 함수의 실행을 일시 중지합니다.

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

async function fetchData() {
  try {
    let data = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Data fetched');
      }, 1000);
    });
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

이 예제에서 `fetchData` 함수는 `async` 키워드를 사용하여 정의되었으며, `await` 키워드를 사용하여 프로미스가 해결될 때까지 대기합니다. 프로미스가 성공적으로 해결되면 `data` 변수에 결과가 저장되고, 이를 콘솔에 출력합니다. 프로미스가 거부되면 `catch` 블록에서 에러를 처리합니다.

이와 같이 Async/Await를 사용하면 비동기 작업을 마치 동기 코드처럼 작성할 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다.