MobX 예제 - 슈퍼마켓 만들기

MobX를 이용한 슈퍼마켓 만들기

출처 : https://velog.io/@velopert/MobX-3-%EC%8B%AC%ED%99%94%EC%A0%81%EC%9D%B8-%EC%82%AC%EC%9A%A9-%EB%B0%8F-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95-tnjltay61n

1. 프로젝트 구성

1) components

- 슈퍼마켓

- 상품

- 장바구니

- 총 가격

2) store

- 슈퍼마켓에 대한 MobX observable, action, computed 정의

2. MobX의 React 컴포넌트 최적화

1) List를 렌더링 할 때는 컴포넌트에 리스트 관련 데이터만 props로 넣는다

2) 세부참조는 최대한 늦게 한다

- 세부 참조 : 특정 객체의 내부의 값을 조회하는 것

- 변동이 일어날 수 있는 값의 세부 참조를 내부에서 하게 되면 더 높은 성능으로 컴포넌트 업데이트 가능

3)  함수는 미리 바인딩하고 파라미터는 컴포넌트 내부에서 넣어준다