MobX의 주요 개념과 원리

MobX는 JavaScript 애플리케이션의 상태 관리를 위해 사용되는 상태 관리 라이브러리입니다. MobX는 간단하고 직관적인 개념과 원리를 가지고 있어 개발자들에게 인기가 있습니다.

주요 개념

Observables (관찰 가능한 값)

Observables는 MobX에서 가장 중요한 개념 중 하나입니다. 이는 상태가 변화할 때 관찰할 수 있는 값입니다. MobX에서는 observable 데코레이터를 사용하여 변수나 객체를 관찰 가능한 값으로 만듭니다. 이렇게 만든 Observable은 새로운 값을 할당 할 때마다 자동으로 감지하고, 이에 따라 연관된 구성 요소를 업데이트합니다.

Actions (동작)

Actions는 상태를 변경하는 메서드나 함수를 일컫습니다. MobX에서는 action 데코레이터를 사용하여 Actions를 정의할 수 있습니다. Actions를 사용하면 상태의 변경을 추적하고, 변경에 따라 자동으로 업데이트되는 것을 보장할 수 있습니다.

Computations (계산)

Computations는 MobX에서 자동으로 유도된 값입니다. Observables와 Actions를 조합하여 계산된 값을 만들 수 있습니다. Computations는 자동으로 추적되며 해당 값에 영향을 주는 부수 효과없이 항상 최신 값을 유지합니다.

원리

MobX의 작동 원리는 다음과 같습니다.

  1. 상태를 관찰 가능한 값으로 만듭니다. (observable)
  2. 상태를 변경하는 액션을 정의합니다. (action)
  3. Computations를 사용하여 관찰 가능한 값에 기반한 유도된 값을 생성합니다.
  4. Observables의 값이 변경되면 Computations가 자동으로 다시 계산되고 변경 사항을 업데이트합니다.
  5. 변화에 따라 구성 요소가 자동으로 업데이트되어 사용자에게 실시간으로 변경 사항을 보여줍니다.

#references

#MobX #JavaScript