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

anpigon(63)

Published in

#zzan

Words

209

Reading

1 min

Listen

Play

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

출처: https://egghead.io/courses/manage-application-state-with-mobx-state-tree

Remove Model Instances from the Tree

강의 링크: https://egghead.io/lessons/react-remove-model-instances-from-the-tree

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

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

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

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

src/components/WishListItemView.js

class WishListItemView extends Component {

  // ...

  render() {
    const { item } = 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

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

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-tree의 destroy를 사용하면, remove()를 더 간단하게 구현할 수 있습니다.

src/models/WhishList.js

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
  }
}));