[React Native] 3-10 삭제 기능 구현하기

context/LogContext.js

import {createContext, useState} from 'react';
import React from 'react';
import {v4} from 'uuid';

const LogContext = createContext();

export function LogContextProvider({children}) {
  (...)
  
  const onModify = modified => {
    const nextLogs = logs.map(log => (log.id === modified.id ? modified : log));
    setLogs(nextLogs);
  };
	// ----추가 ----
  const onRemove = id => {
    const nextLogs = logs.filter(log => log.id !== id);
    setLogs(nextLogs);
  };
	// ------
  return (
    <LogContext.Provider value={{logs, onCreate, onModify,onRemove}}> //onRemove 추가
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;

 

배열의 내장 함수 filter로 특정 Id를 제외한 항목으로만 구성된 새로운 배열을 만들어서

 

상태값을 업데이트 했습니다.

 

이제 우측 상단에 삭제 버튼을 눌렀을 때

 

onRemove함수를 호출 하여 삭제 할 것이며

 

Alert.alert를 사용하여 사용자에게 한번 더 물어보는 과정을 거치겠습니다.

 

screens/WriteScreen.js

import React, {useContext, useState} from 'react';
import {
  View,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  Alert,
} from 'react-native'; //Alert 추가
import {SafeAreaView} from 'react-native-safe-area-context';
import WriteHeader from '../components/WriteHeader';
import WriteEditor from '../components/WriteEditor';
import {useNavigation} from '@react-navigation/native';
import LogContext from '../contexts/LogContext';

function WriteScreen({route}) {
	(...)

  //onRemove 추가
  const {onCreate, onModify, onRemove} = useContext(LogContext);
  // ---- 추가 -----
  const onAskRemove = () => {
    Alert.alert(
      '삭제',
      '정말로 삭제하시겠어요?',
      [
        {text: '취소', style: 'cancel'},
        {
          text: '삭제',
          onPress: () => {
            onRemove(log?.id);
            navigation.goBack();
          },
          style: 'destructive',
        },
      ],
      {cancelable: true},
    );
  };
  // ------
	(...)
  return (
    <SafeAreaView style={styles.block}>
      <KeyboardAvoidingView
        style={styles.avoidingView}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
        <WriteHeader
          onSave={onSave}
          //추가
          onAskRemove={onAskRemove}
          isEditing={!!log}
          //--
        />
        <WriteEditor
          title={title}
          body={body}
          onChangeTitle={setTitle}
          onChangeBody={setBody}
        />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}
(...)

export default WriteScreen;

 

onAskRemove라는 함수를 만들어서 WriteHeader에 Props로 전달했습니다.

 

이전에 Alert.alert를 사용 할때는 취소버튼의 onPress와 4번째 인자인 옵션 객체에

 

Alert.alert를 닫을 때 호출하는 함수인 onDismiss에 () => {}와 같이

 

아무 작업도 하지않는 함수를 넣었지만 생략해도 무방합니다.

 

추가로 isEditing이라는 값도 전달했습니다.

 

WriteHeader에서 이 값을 확인하여 삭제 버튼을 보여줄지 말지 결정합니다.

 

!!log 라는 코드는 log가 유효한 값이라면 true, 그렇지 않으면 false를 전달하겠다는 의미 입니다.

 

이제 WriteHeader에서 isEditing Props가 true 일 때만 삭제 버튼을 보여주고

 

이 버튼을 눌렀을 때 onAskRemove를 호출하도록 하겠습니다.

 

components/WriteHeader.js

(...)
function WriteHeader({onSave, onAskRemove, isEditing}) {   //onAskRemove,isEditing 추가
  const navigation = useNavigation();
  const onGoBack = () => {
    navigation.goBack();
  };
  return (
    <View style={styles.block}>
      <View style={styles.iconButtonWrapper}>
        <TransparentCircleButton
          onPress={onGoBack}
          name="arrow-back"
          color={'#424242'}
        />
      </View>
      <View style={styles.buttons}>
      //수정
        {isEditing && (
          <TransparentCircleButton
            name="delete-forever"
            color={'#ef5350'}
            hasMarginRight
            onPress={onAskRemove}
          />
        )}
        <TransparentCircleButton
          name={'check'}
          color={'#009688'}
          onPress={onSave}
        />
      </View>
    </View>
  );
}

(...)

 

이제 항목을 열어 삭제버튼을 누르면 Alert가 정상적으로 나타납니다.