Learn Observable

Observable은 React에서 상태 관리를 위해 사용되는 개념 중 하나로

Observable은 React 컴포넌트에서 데이터의 변화를 감지하고, 해당 변화에 따라 자동으로 UI를 업데이트할 수 있도록 돕는 기능이다. 이를 위해 observable 함수를 사용한다.

예를 들어, 다음과 같은 코드에서 observable 함수를 사용하여 count라는 변수를 observable 객체로 만들 수 있다.

import { observable } from 'mobx';

const count = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  }
});

위 코드에서 observable 함수는 value, increment, decrement와 같은 속성을 가진 객체를 인자로 받아서 해당 객체를 observable 객체로 만들고 이렇게 만들어진 count 객체는 React 컴포넌트에서 사용될 수 있으며, 해당 객체의 속성 값이 변경될 때마다 자동으로 UI가 업데이트된다.

예를 들어, 다음과 같은 코드에서 count 객체를 사용하여 UI를 업데이트할 수 있다.

import React from 'react';
import { observer } from 'mobx-react';

const Counter = observer(({ count }) => (
  <div>
    <h1>{count.value}</h1>
    <button onClick={count.increment}>+</button>
    <button onClick={count.decrement}>-</button>
  </div>
));

export default Counter;

위 코드에서 observer 함수는 React 컴포넌트를 observable 객체와 연결하여, 해당 객체의 속성 값이 변경될 때마다 자동으로 UI를 업데이트할 수 있도록 한다. Counter 컴포넌트는 count 객체를 props로 받아와서 해당 객체의 값을 UI에 표시하고, increment와 decrement 함수를 버튼 클릭 이벤트와 연결하여 해당 함수가 호출될 때마다 value 값을 변경한다. 이렇게 count 객체의 값이 변경될 때마다 Counter 컴포넌트가 자동으로 업데이트된다.