9.6.2 사용자에게 수정 및 삭제 물어보기

이번에는 사용자에게 수정할 것인지 삭제할 것인지 물어보는 기능을 구현해봅시다. 이 기능을 구현할 때는 PostCard 컴포넌트에 ActionSheetIOS 및 ActionSheetModal에서 사용할 상태와 함수들을 준비하고, 이를 PostCard.js 파일에 작성하면 됩니다. 단, 이렇게 하면 PostCard 컴포넌트의 코드가 너무 길어져서 나중에 코드를 다시 읽을 때 헷갈릴 수 있습니다.

따라서 usePostActions라는 커스텀 Hook 함수를 만들고, 그 내부에 필요한 상태와 함수들을 구현하겠습니다. hooks 디렉터리에 usePostActions.js 파일을 생성해 다음과 같이 작성해주세요.

hooks/usePostActions.js

import {useState} from 'react';
import {ActionSheetIOS, Platform} from 'react-native';

export default function usePostActions() {
  const [isSelecting, setIsSelecting] = useState(false);

  const edit = () => {
    console.log('TODO: edit');
  };
  const remove = () => {
    console.log('TODO: remove');
  };

  const onPressMore = () => {
    if (Platform.OS === 'android') {
      setIsSelecting(true);
    } else {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: ['설명 수정', '게시물 삭제', '취소'],
          destructiveButtonIndex: 1,
          cancelButtonIndex: 2,
        },
        (buttonIndex) => {
          if (buttonIndex === 0) {
            edit();
          } else if (buttonIndex === 1) {
            remove();
          }
        },
      );
    }
  };

  const actions = [
    {
      icon: 'edit',
      text: '설명 수정',
      onPress: edit,
    },
    {
      icon: 'delete',
      text: '게시물 삭제',
      onPress: remove,
    },
  ];

  const onClose = () => {
      setIsSelecting(false);
  };

  return {
    isSelecting,
    onPressMore,
    onClose,
    actions,
  };
}