useBackEvent

지원 종료 예정 (Deprecated)

useBackEvent는 지원 종료 예정이에요. 이후 릴리스에서 제거되니 useBackHandler를 사용하세요.

useBackHandler로 등록한 핸들러는 BackEvent 객체를 받고, true를 반환해서 조건에 따라 뒤로 가기 동작을 가로챌 수 있어요. useBackEvent처럼 등록돼 있는 동안 항상 기본 뒤로 가기를 막으려면 핸들러에서 true를 반환하세요.

// Before
const backEvent = useBackEvent();

useEffect(() => {
  const listener = () => {
    // 뒤로 가기 동작 처리
  };

  backEvent.addEventListener(listener);

  return () => {
    backEvent.removeEventListener(listener);
  };
}, [backEvent]);

// After
const backHandler = useBackHandler();

useEffect(() => {
  const subscription = backHandler.addEventListener(() => {
    // 뒤로 가기 동작 처리
    return true; // 기본 뒤로 가기 동작을 막아요
  });

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

뒤로 가기 이벤트를 등록하고 제거할 수 있는 컨트롤러 객체를 반환하는 Hook이에요. 이 Hook을 사용하면 특정 컴포넌트가 활성화되었을 때만 뒤로 가기 이벤트를 처리할 수 있어요. addEventListener 를 쓰면 뒤로 가기 이벤트를 등록할 수 있고, removeEventListener 를 쓰면 뒤로 가기 이벤트를 제거할 수 있어요. 사용자가 화면을 보고 있을 때만 등록된 뒤로 가기 이벤트가 등록돼요. 화면을 보고 있다는 조건은 useVisibility 을 사용해요.

이 Hook을 사용해 특정 컴포넌트에서 뒤로 가기 이벤트를 처리하는 로직을 정의할 수 있어요.

시그니처

function useBackEvent(): BackEventControls;

반환 값

• BackEventControls
  

  뒤로 가기 이벤트를 제어할 수 있는 객체예요. 이 객체에는 이벤트를 등록하는 addEventListener 메서드와와 제거하는 removeEventListener 메서드가 포함 되어 있어요.

에러

• Error
  

  이 훅이 BackEventProvider 내에서 사용되지 않은 경우 에러를 발생시켜요.

예제

뒤로 가기 이벤트 등록 및 제거 예제

• "Add BackEvent" 버튼을 누르면 뒤로 가기 이벤트가 등록돼요. 이후 뒤로 가기 버튼을 누르면 "back"이라는 알림이 뜨고, 실제로 뒤로 가지 않아요.
• "Remove BackEvent" 버튼을 누르면 등록된 이벤트가 제거돼요. 이후 뒤로 가기 버튼을 누르면 기존 동작대로 정상적으로 뒤로 가요.

import { useEffect, useState } from 'react';
import { Alert, Button, View } from 'react-native';
import { useBackEvent } from '@granite-js/react-native';

export function UseBackEventExample() {
  const backEvent = useBackEvent();

  const [handler, setHandler] = useState<{ callback: () => void } | undefined>(undefined);

  useEffect(() => {
    const callback = handler?.callback;

    if (callback != null) {
      backEvent.addEventListener(callback);

      return () => {
        backEvent.removeEventListener(callback);
      };
    }

    return;
  }, [backEvent, handler]);

  return (
    <View>
      <Button
        title="Add BackEvent"
        onPress={() => {
          setHandler({ callback: () => Alert.alert('back') });
        }}
      />
      <Button
        title="Remove BackEvent"
        onPress={() => {
          setHandler(undefined);
        }}
      />
    </View>
  );
}