[개인프로젝트] Redux->Mobx 전환 및 typescript로 변환

 

Redux->Mobx 전환

처음에 typescript를 사용하지 않고 개인 프로젝트를 진행했었는데,

typescript를 적용하면서 기존에 store로 이용한 redux를 배제하고 mobx를 사용하기로 했다.

 

여러 이유가 있긴 한데, 가장 적합한 이유는 redux보다 사용하기가 편하다는 것.

코드량도 확실히 줄어듬을 느꼈다.

 

또한, 기존에 작업해둔 결과물에서는 store에 통신부분이 같히 엮여있었는데, useQuery를 사용함으로서 store 부분의 통신부분을 배제 할 겸 mobx로 전환하여 다시 개발 하기로 했다.

 

둘의 차이와 mobx의 장점은 배달의민족으로 유명한 우아한형제들 블로그에 자세히 기재되어 있었다.

React에서 Mobx 경험기 (Redux와 비교기) | 우아한형제들 기술블로그

 

 

심플한 예제

일단 /store 하위에, 전역으로 관리할 정보에 관한 파일을 생성한다.

import { action, computed, makeAutoObservable, observable } from "mobx";
export interface SearchOptionType {
    page:number,
    rarity:number[],
    name:string,
    profession:string[]
}

export default class SearchOp {
    searchOption:SearchOptionType = {
        page:1,
        rarity:[],
        name:'',
        profession:[]
    }
    
    lastSearchOption:SearchOptionType = {
        page:1,
        rarity:[],
        name:'',
        profession:[] 
    }

    constructor() {
        makeAutoObservable(this, {
            searchOption: observable,
            lastSearchOption: observable,
            setPage:action,
            setSearchOptionProfession: action,
            setSearchOptionName: action,
            setSearchOptionRarity: action,
            setLastSearchOption: action,
            getSearchOption: computed,
            getLastSearchOption: computed
        })
    }

    setPage = (page:number) => {
        this.searchOption.page = page
    }

    setSearchOptionProfession = (profession: string[]) => {
        this.searchOption.profession = profession
    }

    setSearchOptionName = (name: string) => {
        this.searchOption.name = name
    }

    setSearchOptionRarity = (rarity: number[]) => {
        this.searchOption.rarity = rarity
    }

    setClearSaerchOption = () => {
        this.searchOption = {
            page:1,
            rarity:[],
            name:'',
            profession:[]
        }
    }

    setLastSearchOption = (lastSearchOption: SearchOptionType) => {
        this.lastSearchOption = lastSearchOption
    }

    get getSearchOption() {
        return this.searchOption
    }

    get getLastSearchOption() {
        return this.lastSearchOption
    }

    

    
}

그 다음, store 정보를 보관할 rootStore 파일을 생성한다.

import SearchOp from "./searchOp";
class RootStore {
    searchOp: SearchOp;
    constructor() {
        this.searchOp = new SearchOp()
    }
}

const rootStore = new RootStore()

export default rootStore

이제 사용할 component 에서 rootStore를 호출하면 접근이 된다.

redux에 비해 굉장히 심플해 졌다.

 

알아둬야 할 건, searchOp class의 constructor 부분 정도.

observable, action, computed 라는 정보들이 들어가 있는데, 이는 데코레이터 라고 한다.

 

1. observable

observable은 상태를 정의하는데 사용된는 데코레이터.

mobx는 해당 상태가 변경되면, 컴포넌트에 자동적으로 알려주는 역할.
(디자인 패턴에서의 옵저버 패턴)

 

2. action

observable 상태를 변경하는데 사용하는 데코레이터.

일종의 set을 해주는 역할들이 들어간다.

 

3. computed

observable 상태에서 계산된 값을 가져오는데 사용되는 데코레이터.

get 역할을 하는 얘들을 지정.