MobX는 JavaScript 애플리케이션의 상태 관리를 도와주는 강력한 상태 관리 라이브러리입니다. MobX를 사용하면 코드를 더 단순화하고 가독성을 향상시킬 수 있습니다. 이번 포스트에서는 MobX를 활용하여 코드를 단순화하고 가독성을 높이는 몇 가지 방법에 대해 알아보겠습니다.

1. Observable 상태 사용하기

Observables는 MobX에서 가장 핵심적인 개념 중 하나입니다. Observables는 감지할 수 있는 상태를 나타내며, 상태의 변화를 추적하여 해당 상태를 사용하는 코드에 자동으로 반영됩니다.

예를 들어, 다음과 같은 User 모델이 있다고 가정해봅시다.

class User {
  name = "";
  age = 0;
}

만약 이 User 모델의 name과 age를 추적하여 사용하고 싶다면, Observables을 사용하여 다음과 같이 구현할 수 있습니다.

import { observable } from "mobx";

class User {
  @observable name = "";
  @observable age = 0;
}

이제 name과 age는 Observable 상태로 정의되었으므로, 해당 상태의 변화를 추적할 수 있게 됩니다.

2. Computed 값 활용하기

Computed는 MobX에서 다른 값들을 기반으로 계산되는 파생된 값입니다. Computed를 사용하여 코드를 단순화하고 가독성을 높일 수 있습니다.

예를 들어, 다음과 같은 User 모델이 있다고 가정해봅시다.

class User {
  firstName = "";
  lastName = "";
  
  getFullName() {
    return this.firstName + " " + this.lastName;
  }
}

이 경우, getFullName()은 firstName과 lastName을 이용하여 fullName을 계산하고 반환합니다. 그러나 Computed를 활용하면 다음과 같이 코드를 개선할 수 있습니다.

import { computed, observable } from "mobx";

class User {
  @observable firstName = "";
  @observable lastName = "";
  
  @computed get fullName() {
    return this.firstName + " " + this.lastName;
  }
}

fullName은 Computed로 정의되었으므로, firstName과 lastName이 변경될 때마다 자동으로 계산되어 업데이트됩니다.

3. Reaction 활용하기

Reaction은 특정 값의 변화를 감지하여 관련 동작을 수행하는 기능입니다. Reaction을 사용하면 코드를 더욱 유연하게 작성할 수 있습니다.

예를 들어, 다음과 같은 UserStore가 있다고 가정해봅시다.

class UserStore {
  user = null;
  
  fetchUser() {
    // API 호출 등을 통해 user 정보를 가져와서 설정
    this.user = { name: "John Doe", age: 28 };
  }
  
  updateUser(newUser) {
    // user 정보 업데이트
    this.user = newUser;
  }
}

이 경우, user 값이 변경될 때마다 로그를 출력하려면 Reaction을 활용할 수 있습니다.

import { reaction, observable } from "mobx";

class UserStore {
  @observable user = null;
  
  constructor() {
    reaction(
      () => this.user, // 감지할 값의 getter 함수
      user => console.log("User 정보가 변경되었습니다:", user) // 반응할 동작
    );
  }
  
  fetchUser() {
    // API 호출 등을 통해 user 정보를 가져와서 설정
    this.user = { name: "John Doe", age: 28 };
  }
  
  updateUser(newUser) {
    // user 정보 업데이트
    this.user = newUser;
  }
}

이제 user 값이 변경될 때마다 로그가 출력됩니다.

결론

MobX를 활용하면 코드의 단순화와 가독성을 향상시킬 수 있습니다. Observable, Computed, 그리고 Reaction을 올바르게 활용하여 상태 관리 코드를 깔끔하고 유지보수가 쉬운 형태로 작성할 수 있습니다.

#MobX #상태관리