MobX ํ†บ์•„๋ณด๊ธฐ ๐Ÿง

holim0ยท2021๋…„ 1์›” 25์ผ
4

MobX ํ•ต์‹ฌ

1. Computeds

  • obsevables์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ณ„์‚ฐ๋œ ๊ฐ’, ์ •๋ณด๋ฅผ ๋œปํ•œ๋‹ค.
  • Lazily ํ•˜๊ฒŒ evaluate ํ•˜๋Š”๋ฐ obsevables ๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์„๋•Œ๋งŒ ๊ณ„์‚ฐ์„ ์ง„ํ–‰ํ•œ๋‹ค.
  • Computed Value๋Š” getter ๋กœ ์ง€์ •ํ•ด์„œ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

Example)

โžก๏ธ ์˜ˆ์‹œ์™€ ๊ฐ™์ด get์„ ํ†ตํ•ด์„œ observable์— ์žˆ๋Š” ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

const News = observable({

    searchInput : "",
    state : "pending",
    data : [],

    get Data(){
        return this.data;
    },
    
    apiRequest : flow(function* (){
        try{
            const response = yield axios.get(URL, {
                headers:{
                    
                    'X-Naver-Client-Id':Id,
                    'X-Naver-Client-Secret':Secret,
                    
                },
                params:{
                    query : this.searchInput,
                }
            });
            console.log(response);
            
            
                this.data = response.data.items;
                this.state = "done";
            
            
        }catch(e){
            console.log(e);
        }
        
    })

2. Reactions

โžก๏ธ observable state๊ฐ€ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ์ž๋™์ ์œผ๋กœ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  side effects๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

  • ์ด๋Š” autorun ์„ ์ด์šฉํ•ด์„œ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

autorun(effect: (reaction) => void)

  • ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜๊ธฐ ์ „์— ์šฐ์„ ์ ์œผ๋กœ autorun ์ด ์‹คํ–‰๋œ๋‹ค.

Example)

import { makeAutoObservable, autorun } from "mobx"

class Animal {
    name
    energyLevel

    constructor(name) {
        this.name = name
        this.energyLevel = 100
        makeAutoObservable(this)
    }

    reduceEnergy() {
        this.energyLevel -= 10
    }

    get isHungry() {
        return this.energyLevel < 50
    }
}

const giraffe = new Animal("Gary")

autorun(() => {
    console.log("Energy level:", giraffe.energyLevel)
})

autorun(() => {
    if (giraffe.isHungry) {
        console.log("Now I'm hungry!")
    } else {
        console.log("I'm not hungry!")
    }
})

console.log("Now let's change state!")
for (let i = 0; i < 10; i++) {
    giraffe.reduceEnergy()
}

reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?)

  • autorun ๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ reaction ์€ ์ดˆ๊ธฐ์— ์‹คํ–‰๋˜์ง€ ์•Š๋Š”๋‹ค.

Example)

import { makeAutoObservable, reaction } from "mobx"

class Animal {
    name
    energyLevel

    constructor(name) {
        this.name = name
        this.energyLevel = 100
        makeAutoObservable(this)
    }

    reduceEnergy() {
        this.energyLevel -= 10
    }

    get isHungry() {
        return this.energyLevel < 50
    }
}

const giraffe = new Animal("Gary")

reaction(                             // ์ดˆ๊ธฐ์— ์‹คํ–‰๋˜์ง€ ์•Š๊ณ  ๊ฐ’์ด ๋ณ€ํ™”๋  ๋•Œ ์‹คํ–‰๋œ๋‹ค.
    () => giraffe.isHungry,
    isHungry => {
        if (isHungry) {
            console.log("Now I'm hungry!")
        } else {
            console.log("I'm not hungry!")
        }
        console.log("Energy level:", giraffe.energyLevel)
    }
)

console.log("Now let's change state!")
for (let i = 0; i < 10; i++) {
    giraffe.reduceEnergy()
}



MobX and React

  • Usage:
import { observer } from "mobx-react-lite" // Or "mobx-react".

const MyComponent = observer(props => ReactElement)

โžก๏ธ observer๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ค€๋‹ค.

  • observer ์€ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์™€ observables ๋“ค์„ subscribeํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ’์˜ ๋ณ€ํ™”ํ•จ์— ๋”ฐ๋ผ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ Œ๋”๋ง์ด ๋˜๋Š” ๊ฒƒ์ด๋‹ค.
profile
๋งค์ผ ์กฐ๊ธˆ์”ฉ ์„ฑ์žฅํ•˜๊ณ  ์žˆ๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€