자바스크립트 async/await와 상태 저장소

10 Sep 2023

javascript

자바스크립트는 비동기적인 처리를 위해 Promise와 async/await 패턴을 제공합니다. 이를 통해 비동기 작업을 보다 간결하고 직관적으로 처리할 수 있습니다. 하지만 비동기 작업에서 발생하는 상태 관리는 여전히 중요한 문제입니다. 이러한 문제를 해결하기 위해 상태 저장소(State Store)를 사용할 수 있습니다.

상태 저장소(State Store)란?

상태 저장소는 애플리케이션의 상태를 저장하고 관리하는 역할을 담당합니다. 비동기 작업에서 발생하는 상태를 효과적으로 관리하기 위해 상태 저장소를 사용할 수 있습니다. 이를 통해 상태에 대한 중앙 집중식 관리와 일관성을 유지할 수 있습니다.

Redux와 MobX

Redux와 MobX는 대표적인 상태 저장소 라이브러리입니다. 이들 라이브러리는 비동기 작업에서 발생하는 상태 관리를 위한 다양한 기능과 패턴을 제공합니다.

Redux

Redux는 단방향 데이터 흐름으로 상태를 관리하는 라이브러리입니다. Redux에서는 dispatch를 통해 액션(Action)을 발생시키고, 액션에 따라 상태를 업데이트하는 리듀서(Reducer)를 작성합니다. Redux는 thunk나 saga와 같은 미들웨어를 사용하여 비동기 작업을 처리할 수 있습니다.

// 액션 타입 정의
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// 액션 생성자
function fetchDataRequest() {
  return {
    type: FETCH_DATA_REQUEST
  };
}

function fetchDataSuccess(data) {
  return {
    type: FETCH_DATA_SUCCESS,
    payload: data
  };
}

function fetchDataFailure(error) {
  return {
    type: FETCH_DATA_FAILURE,
    error: true,
    payload: error
  };
}

// 비동기 작업 처리
function fetchData() {
  return async function(dispatch) {
    dispatch(fetchDataRequest());

    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error));
    }
  };
}

Redux에서는 비동기 작업을 위해 thunk나 saga와 같은 미들웨어를 사용할 수 있습니다. 이를 통해 비동기 작업 흐름을 관리하고, 상태를 업데이트할 수 있습니다.

MobX

MobX는 반응형 상태 관리 패턴을 기반으로 한 라이브러리로, 간단한 코드로 상태를 관리할 수 있습니다. MobX에서는 observable을 사용하여 상태를 정의하고, action을 통해 상태를 변경합니다. MobX는 async/await를 자연스럽게 지원하며, 상태를 변경할 때 자동으로 리액션(Reaction)을 발생시킵니다.

import { observable, action } from 'mobx';

class DataStore {
  @observable data;
  @observable loading;
  @observable error;

  @action
  async fetchData() {
    this.loading = true;

    try {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    } catch (error) {
      this.error = error;
    } finally {
      this.loading = false;
    }
  }
}

const store = new DataStore();
store.fetchData();

MobX에서는 @observable을 통해 상태를 정의하고, @action을 통해 상태를 변경합니다. 자동으로 리액션(Reaction)을 발생시켜 상태 변경에 따른 이펙트를 처리할 수 있습니다.

결론

자바스크립트의 async/await를 사용하여 비동기 작업을 효과적으로 처리할 수 있습니다. 하지만 비동기 작업에서 발생하는 상태 관리는 중요한 문제입니다. Redux와 MobX와 같은 상태 저장소 라이브러리를 사용하면 이러한 문제를 해결할 수 있습니다. 이러한 라이브러리를 사용하면 상태를 중앙 집중식으로 관리하여 애플리케이션의 일관성을 유지할 수 있습니다.