코딩, 독서, 여행, 영화, 맛집

0%

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

작성일 Edited on In , , Views: Disqus:

이전글 "[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을 윈도우 전역 변수에 할당합니다.

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


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

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

db.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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());
  ｝),
｝));

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

src/index.js

1
2
3
4
5
6
7
8
9
// ...

// 이제 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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 후크를 통해 자동으로 서버에서 데이터를 가져옵니다.