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

0%

[React] Mobx-state-tree 학습하기 #2 : Mobx-state-tree 모델에서 Actions을 사용하기

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

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



2번째 레슨입니다. Model의 데이터를 수정하기 위해서는 actions를 정의하고 사용해야 합니다.


우리는 다음을 배우게 됩니다.

  • models에 actions을 정의하는 방법
  • self를 사용하여 문제를 해결하는 방법
  • Models은 오직 actions에서만 수정할 수 있는 읽기 전용입니다.


Models에 Actions 정의하기

WhishList 모델에 changeName() actions를 정의합니다.

src/models/WhishList.js

1
2
3
4
5
6
7
8
9
10
11
12
const WishListItem = types
  .model(｛
    // ...
  ｝)
  .actions(self => ｛
    function changeName(newName) ｛
      self.name = newName
    ｝
    return ｛
      changeName
    ｝
｝);

actions에 changeName() 함수를 입력하고 그 함수를 return 합니다. ES6 Syntax를 사용하면 다음과 같이 코드를 더 간단하게 작성할 수 있습니다.

1
2
3
4
5
6
7
8
9
const WishListItem = types
  .model(｛
    // ...
  ｝)
  .actions(self => (｛
    changeName(newName) ｛
      self.name = newName;
    ｝
  ｝));


그다음 나머지 changePrice(), changeImage() actions도 추가로 입력합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const WishListItem = types
  .model(｛
    // ...
  ｝)
  .actions(self => (｛
    changeName(newName) ｛
      self.name = newName;
    ｝,
    changePrice(newPrice) ｛
      self.price = newPrice;
    ｝,
    changeImage(newImage) ｛
      self.image = newImage;
    ｝
  ｝));




그리고 WishList 모델에도 add() 액션을 정의합니다.

1
2
3
4
5
6
7
8
const WishList = types.model(｛
  items: types.optional(types.array(WishListItem), [])
｝)
.actions(self => (｛
  add(item) ｛
    self.items.push(item);
  ｝
｝));



Actions 테스트 하기

테스트 파일에 다음을 입력하고 테스트 합니다.

src/models/WhishList.test.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
it("can add new items", () => ｛
  // WishList 모델 생
  const list = WishList.create();
  // WishList에 아이템 추가
  list.add(
    WishListItem.create(｛
      name: "Chesterton",
      price: 10
    ｝)
  );

  expect(list.items.length).toBe(1); // 리스트 길이는 1
  expect(list.items[0].name).toBe("Chesterton"); // 첫번째 항목이 이름은 Chesterton
  list.items[0].changeName("Book of G.K. Chesterton"); 첫번째 항목이 이름 수정
  expect(list.items[0].name).toBe("Book of G.K. Chesterton"); 첫번째 항목이 이름은 Book of G.K. Chesterton
｝);