[typescript] 타입스크립트에서의 비동기 작업 상태 관리 방법

14 Dec 2023

typescript

비동기 작업은 모던 웹 애플리케이션에서 흔히 발생합니다. 이러한 작업을 효과적으로 관리하고 상태를 추적하는 것은 매우 중요합니다. 이번 포스트에서는 타입스크립트에서 비동기 작업의 상태를 관리하는 방법에 대해 알아보겠습니다.

1. 상태 관리 라이브러리 사용

보통, 비동기 작업 상태를 관리하기 위해 상태 관리 라이브러리를 사용하는 것이 좋습니다. 예를 들어, Redux, MobX, 또는 RxJS와 같은 라이브러리를 활용할 수 있습니다.

import { createStore } from 'redux';

// 리덕스를 사용한 상태 관리 예시
const initialState = { isLoading: false, data: null, error: null };

function dataReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_LOADING':
      return { ...state, isLoading: true, data: null, error: null };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, isLoading: false, data: action.payload, error: null };
    case 'FETCH_DATA_ERROR':
      return { ...state, isLoading: false, data: null, error: action.payload };
    default:
      return state;
  }
}

const store = createStore(dataReducer);

2. TypeScript의 Promise 및 Async/Await 활용

TypeScript를 사용하면 Promise와 Async/Await를 활용하여 비동기 작업을 처리할 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있고, 타입 안정성을 보장할 수 있습니다.

// Promise 및 Async/Await를 사용한 비동기 작업 예시
async function fetchData(url: string): Promise<string> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

// 사용 예시
fetchData('https://api.example.com/data')
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

3. 상태 타입 정의

비동기 작업의 상태를 명확히 정의하는 것이 중요합니다. 타입스크립트를 사용하여 상태 타입을 정의하면 오류를 방지할 수 있습니다.

// 상태 타입 정의
type DataState = {
  isLoading: boolean;
  data: any | null;
  error: string | null;
};

이러한 방법들을 활용하여 타입스크립트에서 비동기 작업의 상태를 효과적으로 관리할 수 있습니다.

더 자세한 정보는 Redux 공식 문서, TypeScript 공식 문서, RxJS 공식 문서, MobX 공식 문서를 참고하시기 바랍니다.