0%

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

이전글 "[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

});

actionschangeName() 함수를 입력하고 그 함수를 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
9
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
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
});


오늘 수업 끝.



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

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


vote, reblog, follow @anpigon

Originally posted on http://steemit.com