MobX 톺아보기 🧐

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하게 해준다. 따라서 값의 변화함에 따라 리액트 컴포넌트에서 렌더링이 되는 것이다.