JSON을 MobX State Tree 모델로 변환 — Numio

JSON 스냅샷을 MobX-State-Tree 모델 정의 const myModel = t.model({...})로 변환합니다. 객체는 t.model, 배열은 모든 항목으로 만든 t.array(...)가 되고, 일부 항목에서 빠졌거나 null인 키는 t.maybe 또는 t.maybeNull이 됩니다.

기존 API 응답이나 저장된 스냅샷으로 store 모델의 뼈대를 만듭니다.

JSON

MobX-State-Tree Model

이럴 때 사용하세요

기존 API 응답이나 저장된 스냅샷으로 store 모델의 뼈대를 만듭니다.
types.* 호출을 일일이 손으로 쓰지 않고 일반 observable 상태를 MobX-State-Tree로 옮깁니다.

사용 방법

store 상태의 JSON 스냅샷을 붙여 넣습니다.
t.model({...}) 출력을 검토합니다. 객체 배열에는 모든 항목을 병합한 인라인 t.model 하나가 들어갑니다.
복사한 뒤 import { types as t } from "mobx-state-tree"를 추가하고 identifier, action, view를 더하세요.

JSON 스냅샷

{
  "filter": "all",
  "selectedId": null,
  "todos": [
    { "id": 1, "title": "Write docs", "done": false, "tags": ["work"] },
    { "id": 2, "title": "Ship", "done": true, "dueAt": null }
  ]
}

MobX-State-Tree 모델

const myModel = t.model({
  filter: t.string,
  selectedId: t.frozen(),
  todos: t.array(
    t.model({
      id: t.number,
      title: t.string,
      done: t.boolean,
      tags: t.maybe(t.array(t.string)),
      dueAt: t.maybe(t.frozen()),
    }),
  ),
})

세부 정보 및 제한 사항

브라우저 Web Worker에서 실행되며 아무것도 업로드되지 않습니다. 출력은 Prettier로 정리됩니다.

실제 값과 함께 있는 null은 t.maybeNull(type)이 됩니다. 항상 null인 값과 빈 배열의 항목은 t.frozen()이 되며, 직렬화 가능한 모든 값을 받습니다.

배열의 일부 항목에만 있는 키는 t.maybe(...)가 됩니다. 타입이 섞인 배열은 t.array(t.union(t.number, t.string))처럼 t.union을 씁니다.

ID를 types.identifier로 감지하지 않으며, t.optional 기본값, action, view도 생성하지 않습니다.

FAQ

JSON 루트가 배열이어도 되나요?

예. 결과는 모든 요소의 키를 병합한 t.array(t.model({...}))가 되고, 일부 요소에만 있는 키는 t.maybe로 감쌉니다.

id 필드가 identifier가 아니라 t.number인 이유는 무엇인가요?

변환기는 값의 타입만 봅니다. id로 참조하거나 reconciliation이 필요하면 t.identifier 또는 t.identifierNumber로 바꾸세요.

입력에 함수를 넣을 수 있나요?

유효한 JSON이 아닌 입력은 JavaScript 객체 리터럴로 파싱되므로 함수 표현식은 t.frozen이 됩니다. 이 모드에서는 각 배열의 첫 항목만 사용하므로 JSON 입력을 권장합니다.

사양 및 참고 자료

MobX-State-Tree: Types overview