일반적으로 전역 상태 관리를 위해서는 Redux와 같은 전역 상태 관리 라이브러리를 사용한다. 이때 Context API를 왜 사용하지 말라는 부분을 정리된 글을 많이 봤다. 하지만 이것을 직접 테스트하지 않았기 때문에 이번에 비교를 해보려고 한다. ( 머리로만 이해하는 것과 눈과 손을 함께 사용하는 것 중 후자가 더 좋을 테니 ㅎㅎ ) 작업 Redux 사용하는 패키지는 react-redux, @reduxjs/toolkit 간단한 테스트를 하기 때문에 기본적인 패키지만 사용했다. // /reducer/counter.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { value: 0, }; const counterSlice =..

MobX를 비동기화하는 방법은 async await을 사용하는 방법과 generator를 사용하는 방법이 있다. 1. async await import { makeObservable, action, runInAction, observable } from "mobx"; import axios from "axios"; export default class Test { info = ""; constructor() { makeObservable(this, { info: observable, get: action, }); } get = async () => { const data = await axios.get("/info"); runInAction(() => { console.log(data); this.inf..

슈퍼마켓 구현하기 MobX를 깊게 다루기 위해서 슈퍼마켓을 추상적으로 구현하려고 한다. market 스토어 작성 import { observable, action, computed, makeObservable } from "mobx"; export default class MarketStore { selectedItems = []; constructor() { makeObservable({ selectedItems: observable, put: action, take: action, total: computed, }); } put = (name, price) => { const exists = this.selectedItems.find((item) => item.name === name); if (!e..

카운터 만들기 yarn add mobx mobx-react import React, { Component } from "react"; import { observable, action, makeObservable } from "mobx"; import { observer } from "mobx-react"; class Counter extends Component { number = 0; constructor() { super(); makeObservable(this, { number: observable, increase: action, decrease: action, }); } increase = () => { this.number++; }; decrease = () => { this.number--..

MobX는 Redux와 같은 인기있는 React 상태 관리 라이브러리이다. MobX의 주요 개념들 1. Observable State( 관찰 받고 있는 상태 ) MobX를 사용하고 있는 앱의 상태는 Observable하다. 즉, 관찰 받고 있는 상태이다. 앱에서 사용하고 있는 State는 변할 수 있고, 만약 특정 부분이 바뀌면 MobX에서 어떤 부분이 바뀌었는지 알 수 있다. 2. Computed Value ( 연산된 값 ) 연산된 값은 기존 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값이다. 주로 성능 최적화를 위해서 사용된다. 어떤 값을 연산해야 할 때, 연산에 기반이 되는 값이 바뀔때만 새롭게 연산하고, 바뀌지 않으면 기존의 값을 사용할 수 있다. 예를들어, 800원짜리 물병을 4병 살..