[React] Mobx-state-tree 학습하기 #14 : 서버에서 데이터 가져오기

in zzan •  2 months ago  (edited)

이전글 "[React] Mobx-state-tree 학습하기 #13 : References와 Identifiers를 사용하여 데이터에 Relationships 만들기"에서 이어지는 내용입니다. 참고로 이 포스팅은 제가 학습한 내용을 노트에 정리하듯이 기록하여 올리는 글이기 때문에 보팅 안해주셔서 됩니다. 많은 분들이 코딩에 흥미를 느꼈으면 좋겠습니다. ㅋ





Loading Data from the Server


14번째 레슨입니다. Let's stop hardcoding our initial state and fetch it from the server instead.


우리는 이번 레슨에서 다음을 배우게 됩니다.

  • Set up basic data fetching
  • Leverage the afterCreate lifecycle hook to automatically run any setup logic a model instance needs to do after creation




우선 하드 코딩되어 있던 user 데이터를 코드에서 제거 합니다. 그리고 서버에서 받아오도록 수정해봅시다.

다음은 store에 액세스 할 수 있도록 하는 간단한 방법입니다. group을 윈도우 전역 변수에 할당합니다.

let group = window.group = Group.create(initialState);


그럼 브라우저 개발자 콘솔에서 접근 가능합니다. 기본적으로 "스냅샷 가져 오기"호출과 동일합니다. 다음은 현재 state입니다.

db.json 파일을 수정합니다. 이 파일에 users 를 추가합니다.

db.json

"users": {
   "a342": {
     "id": "a342",
     "name": "Homer",
     "gender": "m",
     "recipient": "ba32",
     "wishList": {
       "items": [
         {
           "name": "Machine Gun Preacher",
           "price": 7.35,
           "image": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/1gEP9ZC7jpSiuMWNfbOfXTWWF5n.jpg"
         },
         {
           "name": "Avengers: Endgame",
           "price": 17.29,
           "image": "https://image.tmdb.org/t/p/w185_and_h278_bestv2/or06FN3Dka5tukK1e9sl16pB3iy.jpg"
         }
       ]
     }
   },
   // ...
 }




그다음 Group.js 파일을 수정합니다.

Mobx-state-tree의 내장 함수 applySnapshot를 사용합니다. applySnapshot은 매우 유용한 기능입니다. 이미 가지고 있는 state와 수신한 state를 비교합니다. 가능한 적은 변경 사항으로 업데이트를 시도합니다.

src/models/Group.js

// applySnapshot를 import
import { types, flow, applySnapshot } from "mobx-state-tree";

// ...

// load actions을 추가
export const Group = types.model({
  users: types.map(User)
})
.actions(self => ({
  load: flow(function*() {
    const response = yield window.fetch('http://localhost:3001/users');
    applySnapshot(self.users, yield response.json());
  }),
}));


코드에서 initialStateusers 데이터를 삭제합니다. 그리고 Group 모델 인스턴스를 생성하고 나서 바로 group.load() 액션 를 호출해봅시다.

src/index.js

// ...

// 이제 initialState는 비어있는 users 속성만 가지고 있다.
let initialState = { users: {} };

// ...

let group = (window.group = Group.create(initialState));
group.load();


하지만 Group을 만들 때 데이터를 로드하는 것은 항상 일어나야 할 일입니다. 이 경우에 life cycle hooks를 사용할 수 있습니다.

MobX-state-tree에 미리 정의된 특별한 액션을 사용할 수 있습니다. 미리 정의된 특별한 액션 중에서 afterCreate를 사용해봅시다. afterCreate는 인스턴스가 생성되고 전체 객체가 셋팅될 때마다 항상 호출됩니다. 인스턴스 생성시에 자동으로 self.load를 호출 할 수 있습니다.

src/models/Group.js

export const Group = types.model({
  users: types.map(User)
})
.actions(self => ({
  // afterCreate 후크 정의
  afterCreate() {
    self.load();
  },
  load: flow(function*() {
    const response = yield window.fetch('http://localhost:3001/users');
    applySnapshot(self.users, yield response.json());
  }),
}));



마지막으로 src/index.js 파일에서 group.load(); 코드는 삭제합니다. 이제 Group은 인스턴스를 생성하고 나서 afterCreate 후크를 통해 자동으로 서버에서 데이터를 가져옵니다.



오늘 수업 끝.




댓글, 팔로우, 좋아요 해 주시는 모든 분께 감사합니다.

항상 행복한 하루 보내시길 바랍니다.


vote, reblog, follow @anpigon


Originally posted on 안피곤님의 블로그. Steem blog powered by ENGRAVE.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

blockchainstudio님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
blockchainstudio님의 스팀잇 깃허브 기여 상금 첫번째 수상자 - @anpigon님 축하드립니다.

...m" 기능이 업데이트 되었습니다.
(Nitrous 메인개발자 eonwarped의 공지 및 감사포스팅(anpigon께 90% beneficiary) All In One Claim in Nitrous Instances)
로 ...

Thank you for your continued support towards JJM. For each 1000 JJM you are holding, you can get an additional 1% of upvote. 10,000JJM would give you a 11% daily voting from the 700K SP virus707 account.

Hi @anpigon!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.425 which ranks you at #7476 across all Steem accounts.
Your rank has improved 46 places in the last three days (old rank 7522).

In our last Algorithmic Curation Round, consisting of 130 contributions, your post is ranked at #89.

Evaluation of your UA score:
  • You're on the right track, try to gather more followers.
  • You have already convinced some users to vote for your post, keep trying!
  • Try to work on user engagement: the more people that interact with you via the comments, the higher your UA score!

Feel free to join our @steem-ua Discord server