Front-End/MobX

Asynchronous actions

이번에는 mobx에서 비동기 액션 처리를 알아보자 가장 쉬운 방법은 액션을 비동기 로직으로 만들지 말고 각각 state를 변하는 액션을 따로따로 만든 다음에 비동기 로직은 container에서 구현하고 단계별로 state를 변경하는 액션은 별도로 분리해서 호출하는 방식이 있다. 두 번째 방식은 액션 안에서 async await 로직을 실행하면서 state를 변경해야 할 때 runinaction 함수로 타이밍마다 state를 변경하는 방식이 있다. 마지막으로는 mobx에서 제공하는 generator를 사용해서 비동기 로직을 처리하는 방식이 있다. 첫 번째 방식 // UserStore 생성 import { action, makeObservable, observable } from "mobx"; export ..

stores

이번에는 하나의 스토어가 아닌 여러개의 스토어를 사용해보자! TodoStore와 RootStore를 만들어보자 // todoStore import { observable } from "mobx"; export default class TodoStore { @observable todos = []; } // rootStore import PersonStore from "./PersonStore"; import TodoStore from "./TodoStore"; export default class RootStore { constructor() { this.todoStore = new TodoStore(); this.personStore = new PersonStore(); } } 이제 index.js에서..

@inject 와 Provider

@inject 와 Provider 프로바이더에 props로 넣고, @inject로 꺼내 쓴다고 보면 된다 상당히 명시적이고 편하다 컨테이너를 쓰지 않아도 될 것 같지만 컨테이너를 중간에 작성 해 주는것이 프레젠테이션 컴포넌트의 테스트와 분리를 위해서 훨씬 좋다 props로 바꿔준다 this.props.store 설정해 보자 // index.js const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); // app.js export default inject("personStore")(observer(App)); mobx-react에서 가져온 inject로 다시 한 번 감싸준다 감싸면서 한 번 더 실행을 한다 그 안..

@action

action은 observable state를 update시키는 요인이 된다. 마치 Redux action 과도 같은 의미이다. 지금까지 observable에 proxy라고 하는 패턴을 사용해 state를 변경했다. 그러면 왜 action을 사용해야 할까? 이전 소스코드를 살짝 변경해 보자 1번째 방법 // app.js function App() { const personStore = useContext(PersonContext); const age10 = computed(() => { return Math.floor(personStore.age / 10) * 10; }).get(); console.log(personStore.age, personStore.name); const click = () =>..

@Computed

Computed라고 하는 것은 지금까지 배웠던 observable state에서 뭔가 변경이 일어났을 때 실제로 observable state를 바로 렌더해서 사용하는게 아니고 computed라고 하는 실제 렌더를 변경하는 일으키는 항목을 define을 시키고 우리가 사용하는 컴포넌트에서는 computed 상태만 변경되었을 때 렌더를 다시 하는 방향으로 observable의 모든 state 변경에 반응하지 않고 computed 상태를 중간단계에서 처리하는 일종의 캐싱형태의 단계이다. 두 가지 방식 computed(내부에서 observable을 사용하는 함수) 데코레이터 없이 사용하는 방식이다 의 getter에 @computed 달아서 처리 스토어에 사용 getter에만 붙일 수 있다! getter는 함수..

@Observer

Observer에 대해서 알아보자. Observer는 mobx-react에 있기 때문에 설치부터 해야된다. npm i mobx-react Observer는 크게 보면 두 가지 방식으로 쓰일 수 있다. observer() 데코레이터 없이 사용하는 방식 함수처럼 컴포넌트를 실행해서 그 결과물을 사용하는 방식 보통 함수 컴포넌트에 사용 에 가장 위에 @observer 달아서 처리 클래스 컴포넌트에 사용 기존에 사용했던 프로젝트에서 App 컴포넌트를 observer 처리를 해 보자 // App.js import logo from "./logo.svg"; import "./App.css"; import Button from "./components/Button"; import { observer } from "m..

@Observable

MobX는 기본적으로 관찰자 즉, Observer 패턴을 사용하고 있다. Observable의 뜻은 관찰이 가능한 대상을 의미한다. Observable을 이용해서 만들어진 value는 관찰이 가능한 상태로 바뀌게 된다. 이렇게 관찰이 가능한 value에 변화가 생기면 관찰하고 있는것이 다시 실행되게 된다. 두 가지 방식으로 씌여진다. Observable () 데코레이터 없이 사용하는 방식 @ 없이, 함수처럼 hooks에서 사용해서 리턴한 객체를 사용한다. Observable (클래스의 프로퍼티) 데코레이터로 사용하는 방식 클래스 내부에 프로퍼티 앞에 붙여서 사용한다 한 클래스 안에 여러개의 @observable 이 존재한다 Observable은 mobx에 들어있는 기능이기 때문에 mobx를 설치해주자 n..

프로젝트에 Decorator 설정하기

데코레이터 사용하기 MobX 6 이전에는 observable, computed, action을 표시하기 위해 사용하도록 권장했다. 하지만 현재 데코레이터는 ES 표준이 아니기 때문에 기존의 시행되었던 방식과는 다르기 때문에 호환성을 위해 makeObservable / makeAutoObservable을 권장하고 있다. 그러나 기존의 많은 자료에서 데코레이터를 사용하고 있기 때문에 데코레이터 사용방법을 알아보자. 프로젝트 세팅 방법 JSX npx create-react-app mobx-start npm i customize-cra react-app-rewired npm i autobind-decorator // jsconfig.json { "compilerOptions": { "experimentalDec..

[MobX] MobX란?

MobX란? MobX는 react에서 상태 관리를 위해 사용되는 Redux와 비슷한 종류의 State 관리 라이브러리이다. 하지만 Redux와는 다르게 너무나도 간결하고 깔끔한 구조를 가지고 있다. mobX의 공식문서를 참고해보면 mobX는 다음과 같은 구조로 되어있다. Actions : Observable State에 저장되어 있는 데이터들을 변화시키는 액션 함수. Observable State : 관찰되고 있는 데이터 값들이 저장되어 있는 장소. Compute Values : Observable State에 저장되어 있는 데이터가 변화되는 것을 알아채면 렌더링과 같은 Side-Effects Trigger를 전달한다. Side-Effects : 렌더링과 같은 Side-Effects가 실행되고 실행된 S..