MobX를 이용한 익명 사용자 데이터 추적 방법

17 Oct 2023

mobx

MobX는 React 및 React Native를 비롯한 JavaScript 애플리케이션 상태 관리를 위한 강력한 라이브러리입니다. 이번 블로그 포스트에서는 MobX를 이용하여 익명 사용자 데이터를 추적하는 방법에 대해 알아보겠습니다.

1. MobX 설치

먼저, MobX를 사용하기 위해 프로젝트에 MobX를 설치해야 합니다. 다음 명령어를 사용하여 MobX를 설치하세요:

npm install mobx mobx-react

2. 데이터 모델 생성

MobX에서 데이터를 추적하기 위해 데이터 모델을 생성해야 합니다. 익명 사용자 데이터를 추적하기 위해 다음과 같은 모델을 만들 수 있습니다:

import { makeAutoObservable } from 'mobx';

class UserData {
  username = '';
  age = 0;

  constructor() {
    makeAutoObservable(this);
  }

  setUsername(username) {
    this.username = username;
  }

  setAge(age) {
    this.age = age;
  }
}

const userData = new UserData();
export default userData;

위의 예시에서는 username과 age라는 두 개의 속성을 갖는 UserData 클래스를 생성합니다. makeAutoObservable 함수를 이용하여 MobX가 이 클래스의 속성 변화를 추적하도록 설정합니다. 또한 setUsername과 setAge 메소드를 통해 속성 값을 변경할 수 있습니다.

3. 컴포넌트에서 데이터 사용하기

MobX를 이용하여 생성한 데이터 모델을 컴포넌트에서 사용할 수 있습니다. 다음과 같은 예시처럼 컴포넌트에서 데이터를 사용할 수 있습니다:

import React from 'react';
import { observer } from 'mobx-react';
import userData from './userData';

const UserComponent = observer(() => {
  const handleUsernameChange = (event) => {
    const username = event.target.value;
    userData.setUsername(username);
  };

  const handleAgeChange = (event) => {
    const age = event.target.value;
    userData.setAge(age);
  };

  return (
    <div>
      <input
        type="text"
        onChange={handleUsernameChange}
        value={userData.username}
      />
      <input
        type="number"
        onChange={handleAgeChange}
        value={userData.age}
      />
      <p>Username: {userData.username}</p>
      <p>Age: {userData.age}</p>
    </div>
  );
});

export default UserComponent;

위 예시는 UserComponent라는 함수형 컴포넌트를 정의합니다. observer 함수를 이용하여 MobX가 컴포넌트의 상태 변화를 추적하도록 설정합니다. handleUsernameChange와 handleAgeChange 함수를 통해 입력된 값으로 데이터 모델의 속성을 변경하고, 이를 JSX에서 사용합니다.

4. 데이터 모델 사용 결과

위의 예시에서는 <input> 요소를 통해 username과 age 속성의 값을 변경할 수 있습니다. 변경된 값은 데이터 모델에 자동으로 반영되며, JSX에서도 반영된 값을 바로 사용할 수 있습니다.

MobX를 이용하여 익명 사용자 데이터를 추적하는 방법에 대해 알아보았습니다. MobX를 사용하면 React 애플리케이션에서 간단하고 효율적으로 상태 관리를 할 수 있습니다.

더 자세한 MobX 사용법은 MobX 공식 문서를 참고하시기 바랍니다.

#React #MobX

References:

MobX 공식 문서