• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

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

22.02.04 18:26 작성 조회수 244

1

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. 이런경우는어떻게 처리하는게 좋을까요?

답변 1

답변을 작성해보세요.

0

1-1. makeAutoObservable 대신 makeObservable로 mobx가 관리할 대상을 수동으로 설정하셔야 할 것 같습니다.

1-2. 불필요한 부분을 감지하더라도 그게 실제로 바뀌지 않으면 큰 영향을 미치지 않습니다.

2. 화면을 넘기는 것과 데이터를 불러오는 것이 무슨 관계가 있나요? loadNext를 눌렀을 때 기존 데이터를 네트워크 응답받은 데이터로 교체하면 되는 것 아닌가요?

nova020510님의 프로필

nova020510

질문자

2022.02.04

2. 제가 하려고 했던건 처음 로딩하면 데이터는 [data1,data2,data3,data4] 이런식으로 리스트형태로 쌓이게 되고 다음페이지를 누르면 새로운 데이터를 불러와서 [data1,data2,data3,data4,data5,data6,data7,data8] 이런식으로 계속 쌓아가는 구조로 구성하여 한번 로딩된페이지는 바로 보여줄수 있게 할려는 의도였습니다.

다시 생각해보니 화면마다 데이터를 갈아끼우는 방식도 괜찮을것같아요

상황에따라 다르겠지만 페이지별로 데이터를 보여주는경우는 페이지 이동할때마다 네트워크 요청을 통해 데이터를 업데이트 시키나요?

네 페이지 이동시마다 데이터를 서버에서 요청해야하는 것은 맞는데요. 그걸 기존데이터에 합칠지 덮어씌울지는 선택하시면 됩니다.