Derive Information from Models Using Views

강의 링크: https://egghead.io/lessons/react-derive-information-from-models-using-views

4번째 레슨입니다. 이번 레슨에서는 데이터를 선언적으로 derive하고 캐싱하는 views 사용 방법에 대해 학습합니다.

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

모델에서 views를 introduce하는 방법.
계산된 값(computed properties)은 Mobx computed fields에 의해 작동.
reaction 처럼 MST를 Mobx 유틸리티와 결합(combine)하는 방법

WhishList 모델에 총 가격(totalPrice) 필드를 추가합니다.

src/models/WhishList.js

const WishList = types
  .model({
    items: types.optional(types.array(WishListItem), []),
    totalPrice: types.number, // add here
  })

하지만 이렇게 사용하면 WishList 모델이 변경될 때마다 totalPrice를 매번 계산해야합니다.

그래서 다음과 같이 views를 사용합니다. views 이미 계산된 값을 캐싱합니다. 그래서 item이 추가되거나 price 가 변경되지 않으면 totalPrice를 다시 계산하지 않고 캐싱하고 있는 값을 리턴합니다.

export const WishList = types
  .model({
    items: types.optional(types.array(WishListItem), [])
    // totalPrice: types.number,
  })
  .views(self => ({
    get totalPrice() {
      return self.items.reduce((sum, entry) => sum + entry.price, 0);
    }
  }))

모델의 view 테스트 하기

다음과 같이 WhishList.test.js에 테스트 케이스를 작성합니다.

src/models/WhishList.test.js

it("can calculate the total price of a wishlist", () => {
  const list = WishList.create({
    items: [
      {
        name: "Chesterton",
        price: 7.35
      },
      {
        name: "Book of G.K. Chesterton",
        price: 349.95
      }
    ]
  });

  expect(list.totalPrice).toBe(357.3);
});

reaction 사용하여 모델의 view 테스트 하기

mobx에서 제공하는 reaction 유틸은 모델의 데이터 변화를 감지합니다. 모델에 변화가 발생하였을때 totalPrice 값의 변화를 살펴봅시다.

import { reaction } from 'mobx';

it("can calculate the total price of a wishlist", () => {
  // ...
 
  let changed = 0;
  // totalPrice 변화가 발생하면 changed 증가
  reaction(() => list.totalPrice, () => changed++); 
  
  expect(changed).toBe(0); // 변화 없음
  console.log(list.totalPrice);
  list.items[0].changeName("Test"); // 이름 변경
  expect(changed).toBe(0); // 변화 없음
  list.items[0].changePrice(10); // 가격 변경
  expect(changed).toBe(1); // 계산됨
});

위 테스트를 수행해보면 price 값에 변화가 발생하였을때만, totalPrice가 동작하는 것을 확인할 수 있습니다.

오늘 수업 끝.

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

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

vote, reblog, follow `@anpigon`

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

Sort:

Trending

[-]

steem.apps (59) 6 years ago

kr-newbie님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
kr-newbie님의 [8/20 kr-newbie 큐레이팅 프로젝트]

...b.io/#/wallet/kr-newbie
happigon에서 자세한 임대내역이 확인 가능합니다.
만들어주신 anpigon께 감사드립니다!

anpigon님의 HAAPIGON 유저가이드를 참고해주시기 바랍니다!

$0.00

1 vote

anpigon (63) 6 years ago

응원해주시는 모든 분들께 감사합니다. ㅎㅎ

wonsama.zzan님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
wonsama.zzan님의 [ZZAN] DAILY REPORT 2019-08-20

...td> [Movie 리뷰] 숨은 진주같은 한 28 anpigon/td> 11:29:36 [React] Mobx-state- 6

blockchainstudio님이 anpigon님을 멘션하셨습니당. 아래 링크를 누르시면 연결되용~ ^^
zzan1004님의 ALL IN ONE CLAIM

이번에도 anpigon 멋진 기능 추가하셨군요. 사실 관련포맷나왔을때 스엔에서 알아서 기능을 넣을 줄 알았는데 아직도 안되고 있었군요ㅠㅠ 참고로 이전에 scotauto도 한번에 처리하는 방식으로 바뀌었습니다.
참고로 딜레이는 ...

virus707 (76) 6 years ago

Thank you for your continued support towards JJM. For each 1000 JJM you are holding, you can get an additional 1% of upvote. 10,000JJM would give you a 11% daily voting from the 700K SP virus707 account.

[React] Mobx-state-tree 학습하기 #4 : Views를 사용하여 모델에서 정보 보여주기

Derive Information from Models Using Views

모델의 view 테스트 하기

reaction 사용하여 모델의 view 테스트 하기

vote, reblog, follow @anpigon

vote, reblog, follow `@anpigon`