MobX를 활용한 리액트 네이티브 애니메이션 제작

17 Oct 2023

mobx

리액트 네이티브는 크로스 플랫폼 모바일 애플리케이션을 개발하기 위한 강력한 도구입니다. 그리고 MobX는 리액트 애플리케이션의 상태 관리를 간편하게 해주는 라이브러리입니다. 이번 포스트에서는 MobX를 활용하여 리액트 네이티브에서 애니메이션을 제작하는 방법을 알아보겠습니다.

1. MobX란?

MobX는 매우 간단하고 직관적인 상태 관리 라이브러리입니다. 이 라이브러리를 사용하면 데이터를 변화시키는 액션과 그에 따른 반응을 정의할 수 있습니다. 이를 통해 상태 변화에 따른 컴포넌트의 업데이트를 자동화할 수 있습니다.

2. 리액트 네이티브에서 MobX 설치하기

리액트 네이티브 프로젝트에서 MobX를 사용하기 위해서는 먼저 MobX와 MobX 리액트 라이브러리를 설치해야 합니다. package.json 파일이 있는 프로젝트 디렉토리 안에서 다음 명령어를 실행하여 설치할 수 있습니다.

npm install mobx mobx-react --save

3. 애니메이션 상태 관리하기

MobX를 사용하여 애니메이션 상태를 관리하기 위해서는 MobX의 observable과 action 데코레이터를 사용해야 합니다. 먼저 상태를 관리할 클래스를 만들고 MobX의 데코레이터를 적용합니다.

import { observable, action } from 'mobx';

class AnimationStore {
  @observable
  isAnimating = false;

  @action
  startAnimation() {
    this.isAnimating = true;
    // 애니메이션 시작 로직
  }

  @action
  stopAnimation() {
    this.isAnimating = false;
    // 애니메이션 종료 로직
  }
}

const animationStore = new AnimationStore();
export default animationStore;

위 코드에서 isAnimating은 애니메이션이 현재 실행 중인지 아닌지를 나타내는 상태입니다. startAnimation 메서드는 애니메이션을 시작하는 액션입니다. stopAnimation 메서드는 애니메이션을 종료하는 액션입니다.

4. 애니메이션 컴포넌트에서 MobX 사용하기

리액트 네이티브 컴포넌트에서 MobX를 사용하기 위해서는 MobX 리액트의 observer 데코레이터를 사용해야 합니다. observer 데코레이터를 컴포넌트 위에 적용하면 해당 컴포넌트는 MobX의 상태 변화를 감지하여 자동으로 업데이트되게 됩니다.

import React from 'react';
import { View, Text } from 'react-native';
import { observer } from 'mobx-react';

@observer
class AnimationComponent extends React.Component {
  render() {
    const { isAnimating } = this.props.animationStore;
    return (
      <View>
        <Text>{isAnimating ? '애니메이션 실행 중' : '애니메이션 정지'}</Text>
        {/* 애니메이션 컴포넌트 로직 */}
      </View>
    );
  }
}

export default AnimationComponent;

위 코드에서 AnimationComponent 컴포넌트에서는 animationStore의 isAnimating 상태를 참조하여 애니메이션 실행 여부를 보여주는 텍스트를 렌더링합니다. 이렇게 MobX의 observer 데코레이터를 사용하면 isAnimating 상태가 변경될 때마다 컴포넌트가 자동으로 업데이트됩니다.

5. 애니메이션 제어하기

애니메이션 컴포넌트에서 애니메이션을 제어하기 위해서는 animationStore의 액션을 호출해야 합니다. 이를 위해 AnimationComponent에 해당 액션에 접근할 수 있게 animationStore를 전달합니다.

import React from 'react';
import { View, Button } from 'react-native';
import { observer, inject } from 'mobx-react';

@inject('animationStore')
@observer
class AnimationControlComponent extends React.Component {
  startAnimation = () => {
    const { animationStore } = this.props;
    animationStore.startAnimation();
  };

  stopAnimation = () => {
    const { animationStore } = this.props;
    animationStore.stopAnimation();
  };

  render() {
    return (
      <View>
        <Button title="애니메이션 시작" onPress={this.startAnimation} />
        <Button title="애니메이션 정지" onPress={this.stopAnimation} />
      </View>
    );
  }
}

export default AnimationControlComponent;

위 코드에서 AnimationControlComponent는 애니메이션을 시작하거나 정지시키기 위한 버튼을 렌더링합니다. 버튼을 누를 때마다 해당 액션을 호출하여 animationStore의 상태를 변경시킵니다.

마무리

MobX를 활용하여 리액트 네이티브에서 애니메이션을 제작하는 방법에 대해 알아보았습니다. MobX를 사용하면 상태 관리를 간편하게 할 수 있으며, 컴포넌트의 업데이트를 자동화하는 것이 가능합니다. MobX를 이용하여 애니메이션을 제작하는 데에 활용해 보세요!

참고 문서: MobX 공식 문서

#reactnative #mobx