[React] Mobx-state-tree 학습하기 #10 : Model Definitions Change되면 Hot Module Reloading를 사용하여 Model Tree State 복원하기

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

---

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

---

Restore the Model Tree State using Hot Module Reloading when Model Definitions Change

• 강의 링크: https://egghead.io/lessons/react-restore-the-model-tree-state-using-hot-module-reloading-when-model-definitions-change

10번째 레슨입니다. 이번 레슨에서는 HMR(Hot Module Reloading)을 설정하는 방법을 배웁니다. React components와 MST models를 새로 정의하면, HMR에서 이를 다시 로드하여 실행중인 애플리케이션에 적용하게 됩니다.

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

• HMR(Hot Module Reloading) 설정 방법
• components의 변경 사항을 accept 하는 방법
• state를 유지하면서 changing model definitions의 변경 사항을 accept하는 방법

---

이전에 우리는 state를 보존하기 위해서 로컬 스토리지를 사용했습니다. 하지만 현재 개발 방식에는 단점이 있습니다. 무언가를 변경할 때 마다 앱을 다시 로드해야 한다는 것입니다.

hot module reloading 라고 불리는 기술이 mobx-state-tree 에서 잘 작동하도록 설정할 수 있습니다. hot module reloading는 대략 다음과 같이 작동합니다. JS 파일을 수정하면 webpack은 변경 사항을 반환 application으로 보내고 메모리의 모듈을 대체합니다.

이전에 개발했던 로컬 스토리지 구현을 제거합니다. 그런 다음 renderApp 함수를 작성합니다. renderApp는 단순히 initial render을 래핑한 함수입니다.

우리는 핫 모듈 리로딩에서 두가지 변경의 경우를 처리해야 합니다. 첫번째는 컴포넌트가 변경되는 경우입니다. 이 경우에는 루트에서 application을 다시 렌더링하면 됩니다. 두번째는 모델이 변경된 경우입니다. 이 경우에는 스냅샷을 사용하여 현재 state tree가 유지되도록 해야 합니다.

index.js 파일을 다음과 같이 수정합니다.

src/index.js

import React from "react";
import ReactDOM from "react-dom";

import { getSnapshot } from 'mobx-state-tree'; // add here

import App from "./components/App";

import { WishList } from "./models/WhishList";

let initialState = {
  items: [
    // ...
  ]
}

let wishList = WishList.create(initialState);

function renderApp() {
  ReactDOM.render(<App wishList={wishList} />, document.getElementById("root"));
}

renderApp();

if(module.hot) {
  module.hot.accept(["./components/App"], () => {
    // new compoennts
    renderApp();
  });

  module.hot.accept(["./models/WhishList"], () => {
    // new model definitions
    const snapshot = getSnapshot(wishList);
    wishList = WishList.create(snapshot);
    renderApp();
  });
}

이제는 모델을 수정해도 현재 작업하고 있던 state tree를 그대로 유지 할 수 있습니다.

오늘 수업 끝.

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

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

---

vote, reblog, follow @anpigon

---

^{Originally posted on 안피곤님의 블로그. Steem blog powered by ENGRAVE.}