0%

[React] Mobx-state-tree 학습하기 #7 : Remove Model Instances from the Tree

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





Remove Model Instances from the Tree


7번째 레슨입니다. 이번 레슨에서는 MST의 tree semantics에 대해서 좀더 깊이 배워봅니다.


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

  • 액션(Actions) 자신의 하위트리(subtree)만 변경 가능합니다.
  • getParent를 사용해서 현재 모델 인스턴스의 부모를 찾아봅니다.
  • destroy를 사용하여 트리에서 현재 인스턴스를 완전히 제거해봅니다.




먼저 WishListItemView.js 파일을 수정합니다. WishListItemView 컴포넌트에 삭제 ❎ 버튼을 만듭니다.

src/components/WishListItemView.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class WishListItemView extends Component

// ...

render() {
constitem= this.props;
return this.state.isEditing ? (
this.renderEditable()
) : (
<li className="item">
{item.image && <img src={item.image} alt="" />
<h3>{item.name}</h3>
<span>{item.price}</span><br/>
<span>
<button onClick={this.onTooleEdit}>✏️</button>
{/* add here */}
<button onClick={item.remove}>❎</button>
</span>
</li>
);


// ...



앱을 실행하면 이제 항목에 삭제 ❎ 버튼이 보입니다. 하지만 지금은 삭제 ❎ 버튼을 눌러도 아무런 일도 일어나지 않습니다.



모델에 삭제 액션을 추가합니다.

먼저 WishListItem 모델을 수정합니다. 그리고 WishListItem 모델에 remove() 액션을 추가합니다. 자신(self)을 제거할 수 없기 때문에, remove() 액션에서 다시 부모의 remove() 액션을 호출합니다. 부모를 찾기 위해서 getParent를 사용합니다.

src/models/WhishList.js

1
2
3
4
5
6
7
8
9
10
11
12
import { types, getParent } from "mobx-state-tree"; // add here

export const WishListItem = types
.model({
// ...
})
.actions(self => ({
// ...
remove() {
getParent(self, 2).remove(self); // add here

}));

getParent(self, 2)에서 2번째 인자값 2의 의미는 getParent(getParent(self)) 입니다. 현재 모델 트리구조가 WishList: { items: [{ self }] } 이기 때문에, WishList 모델에 접근하기 위해서 Parent를 2번 수행합니다.



그다음 WishList 모델을 수정합니다. 여기에도 remove() 액션을 추가합니다.

src/models/WhishList.js

1
2
3
4
5
6
7
8
9
10
11
12
export const WishList = types.model({
// ...
})
.views(self => ({
// ...
}))
.actions(self => ({
// ...
remove(item) {
self.items.splice(self.items.indexOf(item), 1); // add here

}));

splice는 ES6에 추가된 문법입니다. 현재 인덱스의 1개 아이템을 제거합니다. 자세한 사용방법은 mozilla 개발자 문서를 참고하세요


mobx-state-treedestroy를 사용하면, remove()를 더 간단하게 구현할 수 있습니다.

src/models/WhishList.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { types, getParent, destroy } from "mobx-state-tree"; // add here

export const WishList = types.model({
// ...
})
.views(self => ({
// ...
}))
.actions(self => ({
// ...
remove(item) {
destroy(item); // add here

}));

실행결과


오늘 수업 끝.



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

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


vote, reblog, follow @anpigon

Originally posted on http://steemit.com