[javascript] MobX와 폼 처리

04 Dec 2023

javascript

폼(form)은 웹 애플리케이션에서 사용자 입력을 받는 중요한 요소입니다. MobX는 React와 함께 사용되며, 상태 관리를 간단하게 만들어주는 좋은 라이브러리입니다. 이번 글에서는 MobX를 사용하여 폼 처리를 어떻게 할 수 있는지 살펴보겠습니다.

MobX란?

MobX는 상태 관리를 위한 라이브러리로, React나 Vue와 함께 사용할 수 있습니다. MobX는 상태 변화를 감지하고, 이를 자동으로 업데이트해주는 기능을 제공합니다. 이를 통해 개발자는 애플리케이션의 상태 변화를 직접 관리하지 않고도 상태를 업데이트할 수 있습니다.

MobX를 이용한 폼 처리

MobX를 사용하여 폼 처리를 할 때는, 폼의 각 입력 필드에 대한 상태를 MobX observable로 만들고, 이를 업데이트하기 위한 액션을 정의합니다. 이렇게하면 상태 변화에 따라 화면이 자동으로 업데이트됩니다.

다음은 MobX를 이용하여 간단한 로그인 폼을 처리하는 예시입니다.

import { observable, action } from 'mobx';

class LoginForm {
  @observable username = '';
  @observable password = '';

  @action setUsername(username: string) {
    this.username = username;
  }

  @action setPassword(password: string) {
    this.password = password;
  }

  @action handleSubmit() {
    // 로그인 처리 로직 작성
    console.log('Username:', this.username);
    console.log('Password:', this.password);
  }
}

const form = new LoginForm();

// 폼 입력 필드에 대한 이벤트 핸들러
function handleUsernameChange(e: React.ChangeEvent<HTMLInputElement>) {
  form.setUsername(e.target.value);
}

function handlePasswordChange(e: React.ChangeEvent<HTMLInputElement>) {
  form.setPassword(e.target.value);
}

// 폼 제출
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  form.handleSubmit();
}

// React 컴포넌트
function LoginFormComponent() {
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={form.username} onChange={handleUsernameChange} />
      <input type="password" value={form.password} onChange={handlePasswordChange} />
      <button type="submit">로그인</button>
    </form>
  );
}

위 예시에서는 LoginForm 클래스를 선언하여 폼의 상태를 관리합니다. @observable 데코레이터는 해당 필드를 MobX observable로 만들어줍니다. @action 데코레이터는 해당 메서드를 MobX 액션으로 정의하여 상태를 업데이트할 때 호출됩니다.

폼의 입력 필드에 대한 이벤트 핸들러는 MobX의 액션을 호출하여 상태를 업데이트합니다. 이 때, 입력값은 이벤트 객체에서 가져온 후 액션 메서드에 전달됩니다.

폼 제출 버튼을 클릭하면 handleSubmit 함수가 호출됩니다. 이 함수는 preventDefault를 호출하여 폼의 기본 동작을 막고, LoginForm의 handleSubmit 액션을 호출합니다.

결론

MobX는 간단하고 직관적인 API를 제공하여 폼 처리를 쉽게 할 수 있도록 해줍니다. MobX의 observable과 action을 이용하여 폼의 상태를 관리하고 업데이트할 수 있습니다. MobX를 사용하면 상태 변화에 따른 화면 업데이트를 자동으로 처리할 수 있으므로, 폼 처리 코드를 더욱 간결하게 작성할 수 있습니다.