async/await을 적용한 커스텀 hook

Reactive Native 비동기 프로그래밍

Promise

Promise<T>는 자바스크립트에서 비동기 연산의 결과(T 타입의 값)를 추상화한 타입이다.
`Promise`는 `then`함수를 통해 `T`타입 값으로 환원(resolve)되거나 `catch`함수를 통해 에러를 전달한다.</mark>

비동기 연산

비동기 연산이란 일반적으로 Network I/O, Disk I/O를 처리하는 동안 메인 스레드가 block되는 것을 막아 throughput을 증가시키는 방법이다.

network 통신(web api)

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Timer

function delay(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

delay(1000).then(() => console.log('Waited one second!'));

File I/O

const fs = require('fs').promises;

fs.readFile('/path/to/file.txt', 'utf8')
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

사용자 정의 연산

연산이 성공할 경우 Promise객체는 result값으로 환원(resolve)된다. 연산이 실패할 경우 Promise객체는 reject되고 에러를 반환한다.

function myAsyncOperation(data) {
  return new Promise((resolve, reject) => {
    // ... 비동기 연산 ...
    if (/* 연산이 성공하면 */) {
      resolve(result);
    } else {
      reject(new Error('Failed'));
    }
  });
}

이렇게 정의한 함수는 아래와 같이 사용할 수 있다.

myAsyncOperation(someData)
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

async/await

await연산자는 Promise객체의 복잡한 then체인을 간결하게 만들 목적으로 도입되었다. Promise 인스턴스가 피연산자일 경우 자동으로 resolve된 값을 반환한다. 반대로 reject될 경우 Error를 던딘다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 1000);
  });
}

async function displayData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

displayData();

그리고 await 연산자를 사용하는 함수는 반드시 async 키워드를 붙여야 한다.

reference

• Do it! 리액트 앱 프로그래밍
• ChatGPT