[typescript] MobX 비동기 상태 변화와 타입스크립트 async/await 문법의 활용 방법
MobX와 타입스크립트를 함께 사용하는 경우, 비동기 상태 변화와 관련된 작업을 수행해야 할 때가 있습니다. 이를 위해서 우리는 async/await 문법을 사용하여 간단하고 강력한 비동기 코드를 작성할 수 있습니다.
MobX에서의 비동기 상태 변화
MobX에서 비동기 코드를 다룰 때 주로 observable, action, runInAction, 그리고 reaction과 같은 개념을 사용합니다. observable은 관찰 대상이 될 객체나 값을 지정하고, action은 상태 변화를 일으키는 함수에 붙이는 데코레이터입니다. runInAction은 비동기 코드 내에서 상태를 변경할 때 사용되며, reaction은 특정 상태의 변화를 감지하여 자동으로 특정 동작을 수행하는 메커니즘을 제공합니다.
타입스크립트 async/await 문법의 활용
타입스크립트에서 비동기 코드를 작성할 때, async/await 문법을 사용하여 간결하고 가독성 높은 코드를 작성할 수 있습니다. async 키워드를 함수 앞에 붙이고, 해당 함수 내에서 await 키워드를 사용하여 비동기 작업이 처리될 때까지 기다립니다.
import { action, observable, runInAction } from 'mobx';
class TodoStore {
@observable todos = [];
@action
async fetchTodos() {
try {
const response = await fetch('https://api.example.com/todos');
const data = await response.json();
runInAction(() => {
this.todos = data;
});
} catch (error) {
console.error('Error fetching todos: ', error);
}
}
}
위의 코드에서 fetchTodos 함수는 async 키워드로 선언되어 있고, 내부에서 await를 사용하여 비동기 처리를 하고 있습니다.
결론
타입스크립트의 async/await 문법과 MobX의 상태 관리 기능을 적절히 결합하면 비동기 상태 변화를 간편하게 처리할 수 있습니다. 이러한 형태의 코드를 엄격한 타입 검사와 함께 사용함으로써 안정적이고 유지보수가 용이한 애플리케이션을 개발할 수 있습니다.