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

class Store{
    repository;
    rootStore;
    num = 0;
    constructor(repository,rootStore){
        makeAutoObservable(this);
        this.repository = repository;
        this.rootStore = rootStore;
    }
    addnum = ()=>{
         num++;
    }
}

mobx makeautoObservable 관련 질문입니다.

대충 이런식으로 store 가 있는데  makeAutoObservable이 알아서 action 이랑 observable을 지정해줍니다.

1-1. respository와 rootStore는 observable 하게 하고싶지 않은데 mobx devtools를보니 repository와 rootStore를 감지하고 있더라고요 특정 변수 또는 함수를 autoObservable 에 제외시킬수 있나요? repository 나 rootStore 앞에 private 키워드를 줘봤는데도 감지하고 있었습니다.

 

1-2. 위처럼 메모리에 불필요한 상태값까지 감지하게되면 나중에 state 가 커지면 성능과 메모리 차지에 큰 영향을 끼칠까요?

mobx로 비동기 처리해야될때 질문입니다.

네트워크 요청해서 데이터를 보여줘야되는데

리스트로 항목 4개 보여주고 화살표로 다음 페이지버튼 보거나 이전페이지 버튼 보게 하고 있습니다.

 

 

다음페이지로 넘기면 네트워크 요청하고 응답받으면 데이터를 보여주게되고

요청을 날릴때는 빈화면이고 요청에대한 응답을 받았을때 데이터를 뿌려줘야됩니다.

<button onClick = {()=>store.loadPrevious()}>previous</button> 
{store.listData && <MyListComponent data={store.listData.slice(store.page*4,store.page+4)}/>}
<button onClick = {()=>store.loadNext()}>next</button> 

 이런식으로 store.listData 가 있을때 컴포넌트가 나오게 했습니다.

첫화면 로딩시 즉 useEffect() 에서 요청날렸을땐 제대로 동작하는데 

다음페이지 버튼을 누르면 이미 store.listData는 이미 null이 아니기떄문에 네트워크요청 응답을 받기도전에 화면을 넘겨서 데이터를 제대로 뿌려주지를 못합니다.

2-1. 이런경우는어떻게 처리하는게 좋을까요?