인프런 커뮤니티 질문&답변

mobx react next 로 하고 있는데

runInAction 에서 비동기처리를 하려면 어떻게 해야되나요?

 

Component.tsx

 const store = useIndexStore();    
useEffect(() => {
        const fetchData = async () => {
            await store.loadNewMemberData();
            console.log(store.newMember)
        }
        fetchData();

    }, [])

일단 훅스 컴포넌트에서 useEffect에서 store 에 저장된 정보를 불러와야되는데 Promise 기때문에 따로 함수를 만들어줘서 호출을 했고요.

useEffect 뜯어보니 함수 리턴타입이 void|Destructor(?) 라 Promise 타입을 못받아서 저렇게 만들었습니다.

1. useEffect 에서 비동기 작업을 할때 저렇게 async 함수 만들어서 호출해야되는건가요?

2. async 함수를 만들었으면 꼭 await 으로 호출안해도 되는건가요?

store.ts

class IndexStore {
    root;
    repository
    rtrMenu: MenuItem[] = []// 
   
    constructor(root: RootStore, repository: BaseRepository) {
        this.root = root
        this.repository = repository
        makeAutoObservable(this)
    }

    loadRealtimeRequestData = async (): Promise<void> => {
        runInAction(() => {
            this.rtrMenu =this.repository.getRealTimeRequestItem()
        });
    }


}

store에선 loadRealtimeRequestData() 함수에서

네트워크 요청한 결과를 받습니다. await this.repository.... 여기가 await axios.get() 이런 역할을 하게 되는데  then 을 하면 쉽게 해결될문제지만 async awiat 으로 runInAction 안에서 처리할려면 어떻게 해야되나요?