React Native Quick Action을 사용해서 UX 향상시키기

안녕하세요, 여러분!
오늘은 제가 개발 중인 캘린더 앱에 react-native-quick-actions 라이브러리를 사용해 훨씬 더 편리한 사용자 경험을 제공하는 방법을 공유하려고 합니다.

스마트폰을 사용하다가 앱을 길게 누르면 아래와 같은 액션 창을 본 적이 있을 겁니다. 옛날에는 앱 제거와 앱 위치 이동밖에 없었지만, 이제는 다양한 기능들로 사용자 경험을 향상시킬 수 있습니다.

Quick Actions 설정하기

먼저, react-native-quick-actions 라이브러리를 사용하여 Quick Actions를 설정합니다.
Quick Actions를 통해 앱을 실행하면 특정 작업을 바로 수행할 수 있습니다.

설치

라이브러리를 설치합니다. 이 단계는 쉽기 때문에 따로 설명하지 않겠습니다. 설치가 완료되면 다음과 같이 코드를 작성합니다.

import React, { useEffect } from 'react';
import { DeviceEventEmitter } from 'react-native';
import QuickActions from 'react-native-quick-actions';

QuickActions.setShortcutItems([
  {
    type: '새로운 일정',
    title: '새로운 일정',
    icon: 'Compose',
    userInfo: {
      url: 'schedule',
    },
  }
]);

const App = () => {
  const handleQuickAction = (data) => {
    if (data.type === '새로운 일정') {
      // 원하는 작업 수행: 예를 들어 화면 이동
      console.log('Quick Action Triggered: 새로운 일정');
      // 네비게이션을 사용하여 특정 화면으로 이동
      // navigation.navigate('ScheduleScreen');
    }
  };

  useEffect(() => {
    const quickActionListener = DeviceEventEmitter.addListener(
      'quickActionShortcut',
      handleQuickAction
    );

    return () => {
      quickActionListener.remove();
    };
  }, []);

  return (
    // 앱의 루트 컴포넌트
  );
};

export default App;

코드를 간단히 설명하겠습니다

1. QuickActions.setShortcutItems:
   Quick Actions를 설정합니다. type, title, icon, userInfo 등을 정의하여 사용자가 앱을 길게 눌렀을 때 나타날 항목을 지정합니다.

2. DeviceEventEmitter.addListener:
   Quick Action이 발생하면 handleQuickAction 함수가 호출됩니다. 이 함수에서 원하는 작업을 수행할 수 있습니다. 예를 들어, 화면을 이동시키거나 특정 작업을 바로 수행할 수 있습니다.

퀵액션을 통해 앱을 실행하면 handleQuickAction에 데이터가 들어옵니다. 이 데이터를 바탕으로 화면을 이동시키거나 원하는 작업을 수행할 수 있습니다.

마무리

간단한 기능 추가만으로도 사용자의 경험을 향상 시킬 수 있었습니다. 작은 기능들이 모여 큰 비지니스가 되는 것을 느끼게 되었습니다. 작은 기능이라 하더라도 꼼꼼하게 개발하는 개발자가 되어야겠다가 느꼈습니다.