---
title: 리액트 네이티브 파일 삭제: Back4app 클라우드 연동
slug: docs-kr/react-native/parse-sdk/working-with-files/react-native-delete-files
description: 리액트 네이티브 앱에서 Back4app 파일 삭제하는 방법 및 클라우드 코드 구현.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T17:24:23.366Z
---
# 리액트 네이티브 앱에서 파일 삭제하기
## 소개
이 가이드에서는 리액트 네이티브 앱에서 back4app 클라우드의 파일을 삭제하는 가장 좋은 방법을 배울 것입니다.
Back4app에서 애플리케이션 파일을 관리하기 위해 우리는 `Parse.File` 유틸리티 클래스를 사용합니다. 이 클래스를 사용하여 저장, 검색 및 삭제 작업을 수행할 수 있습니다. 이전 섹션에서는 [파일 저장](https://www.back4app.com/docs/js-framework/react-native-files), 데모 갤러리 앱을 생성하여 파일을 저장하고 검색하는 방법을 다루었습니다.
이 시점에서, 생성하고 저장한 후 `Parse.File`을(를) 다른 데이터 객체와 항상 연결하는 것이 최선의 방법이라는 것을 알고 있어야 합니다. 이는 프로젝트에서 고아 파일이 생성되는 것을 방지하고 Back4app 클라우드에서 파일을 찾고 삭제할 수 있게 해줍니다.
`Parse.File`은 파일 삭제 방법을 제공하지만, 이는 보안에 민감한 작업이므로 클라이언트 측에서 수행해서는 안 됩니다. 이 튜토리얼에서는 애플리케이션 파일을 제거하는 최선의 방법을 배울 것입니다.
## 목표
리액트 네이티브 갤러리 데모 앱에 이미지 삭제 작업 추가하기
## 전제 조건
:::hint{type="info"}
**이 튜토리얼을 완료하려면 다음이 필요합니다:**
- [파일 저장](https://app.archbee.com/docs/_roxIyUMXoBue9I7uv49e/niJIQGQOc93TzrlyDmcBi) 튜토리얼을 완료하세요.
- Parse >= 4.2.0
:::
## 1 - 애플리케이션 설정
이전 섹션에서, [파일 저장](https://www.back4app.com/docs/js-framework/react-native-files), 우리는 사용자 사진을 업로드하고 표시하기 위해 데모 갤러리 앱을 만들었습니다.
이번 튜토리얼에서는 `Gallery.js` 컴포넌트의 각 이미지 항목에 삭제 버튼을 추가하여 이 앱을 확장하고 삭제 작업을 수행할 것입니다.
데모 갤러리 앱의 코딩을 이미 완료했다면 다음 단계로 넘어갈 수 있습니다.
대안으로, 이 튜토리얼을 따라가기 위해 앱의 코드 베이스를 클론할 수 있습니다.
프로젝트를 클론하려면 다음을 실행하세요:
`git clone https://github.com/templates-back4app/react-native-demo-gallery-app`
그런 다음, 프로젝트 종속성을 설치하세요:
:::BlockQuote
1 cd react**-**native**-**demo**-**gallery**-**app
2
3 # yarn 사용
4 yarn install
5
6 # npm 사용
7 npm install
:::
실행하기 전에, Back4app 자격 증명을 설정하는 것을 잊지 마세요, `앱 ID` 및 `JavascriptKey`, `initialize` 메서드에서. 앱 자격 증명 설정에 대한 정보는 [Parse SDK 설치](https://www.back4app.com/docs/js-framework/react-native-cli)를 참조하세요.
마지막으로, React Native 애플리케이션을 실행하세요:
:::BlockQuote
1 # 안드로이드용
2 npx react**-**native run**-**android
3
4 # iOS용
5 npx react**-**native run**-**ios
:::
## 2 - 삭제 버튼 만들기
갤러리 앱에서 `Gallery.js` 컴포넌트는 Back4app 클라우드 프로젝트에서 이미지 목록을 렌더링합니다. 다음으로, 현재 목록의 모든 이미지 항목에 버튼을 생성하고 추가할 것입니다.
다음 내용을 추가하려면 `Gallery.js` 파일을 엽니다:
```javascript
1 import React, {useState, useEffect} from 'react';
2 import {Text, View, Image, FlatList, StyleSheet, Button, Alert} from 'react-native';
3 import Parse from 'parse/react-native.js';
4
5 const Gallery = () => {
6 const [images, setImages] = useState([]);
7
8 useEffect(() => {
9 const fetchImages = async () => {
10 let query = new Parse.Query('Gallery');
11 const results = await query.find();
12 setImages(results);
13 };
14
15 fetchImages();
16 }, []);
17
18 async function onDeleteImage(image_id) {
19 // TODO: implement this function
20 }
21
22 return (
23 No images uploaded.}
30 renderItem={({item}) => (
31
32
36
42 )}
43 keyExtractor={(item) => item.id}
44 />);
45
46 };
47
48 const styles = StyleSheet.create({
49 container: {
50 flex: 1,
51 backgroundColor: '#f5f5f5',
52 },
53 listContent: {
54 justifyContent: 'center',
55 alignItems: 'center',
56 },
57 imageItem: {
58 width: 100,
59 height: 100,
60 resizeMode: 'cover',
61 marginHorizontal: 5,
62 marginVertical: 5,
63 },
64 });
65 export default Gallery;
```
우리는 renderItem 함수를 리팩토링하여 모든 렌더링된 이미지에 삭제 버튼을 추가했습니다. 그러나 버튼 클릭 이벤트는 여전히 기능이 구현되지 않았습니다. 다음 단계에서 이를 수행할 것입니다.
## 3 - 사진 삭제 클라우드 함수 만들기
파일은 항상 [파일 저장소](https://www.back4app.com/docs/js-framework/react-native-files)와 데이터 객체에 연결되어야 한다는 것을 배웠습니다. 파일을 데이터 객체에 연결하지 않으면 고아 파일이 생성됩니다. 이러한 파일은 앱 내에서 접근할 수 없습니다. 파일을 찾을 수 없으면 앱에서 삭제할 수도 없습니다. Back4App 대시보드의 Purge Files 옵션을 사용하여만 삭제할 수 있습니다.
삭제 과정은 파일을 찾고 삭제하는 것으로 구성됩니다. Parse에서는 `destroy` 메서드를 사용하여 참조된 파일을 삭제합니다. 그러나 클라이언트 측에서 사용하는 것은 안전하지 않으며 `masterKey`가 필요합니다.
React Native 앱을 빌드할 때 모든 키가 함께 번들로 묶이므로, 누구나 앱을 리버스 엔지니어링하거나 디컴파일하거나 자신의 장치에서 네트워크 트래픽을 프록시하여 `masterKey`를 찾을 수 있습니다. 마스터 키를 사용하면 [클래스 수준 권한](https://docs.parseplatform.org/js/guide/#class-level-permissions) 및 [ACL](https://docs.parseplatform.org/js/guide/#object-level-access-control)과 같은 앱의 모든 보안 메커니즘을 우회할 수 있습니다. Parse 보안 모범 사례에 대한 자세한 내용은 [여기](https://blog.back4app.com/parse-server-security/)에서 확인할 수 있습니다.
파일을 삭제하는 가장 좋은 방법은 [클라우드 코드 함수](https://www.back4app.com/docs/get-started/cloud-functions)를 사용하여 서버 측에서 수행하는 것입니다. 우리의 갤러리 앱에서는 이를 위한 클라우드 코드 함수를 만들 것입니다.
다음 클라우드 함수를 사용하여 `main.js` 파일을 생성합시다:
```javascript
1 Parse.Cloud.define('deleteGalleryPicture', async (request) => {
2 const {image_id} = request.params;
3 const Gallery = Parse.Object.extend('Gallery');
4 const query = new Parse.Query(Gallery);
5 try {
6 const Image = await query.get(image_id);
7 const picture = Image.get('picture');
8
9 await picture.destroy({useMasterKey: true});
10 await Image.destroy();
11 return 'Image removed.';
12 } catch (error) {
13 console.log(error);
14 throw new Error('Error deleting image');
15 }
16 });
```
간단하게 하기 위해, 우리는 대시보드를 사용하여 클라우드 함수를 직접 업로드할 것입니다:
1. 앱 `대시보드`를 열고 [Back4App 웹사이트 ](https://www.back4app.com/)로 가서`Core`, 그 다음 `Cloud Code Functions`을 클릭합니다.
2. 루트에 `main.js` 파일을 업로드합니다.`cloud/` 폴더에.
3. 함수를 Back4app 서버에 배포합니다.
몇 초 후에 클라우드 코드 함수가 REST 또는 Parse SDK를 통해 호출할 수 있게 됩니다.
## 4 - 앱에서 클라우드 함수 삭제 호출하기
Back4app Cloud Code 함수를 성공적으로 배포한 후, 갤러리 앱에서 사용자가 삭제 버튼을 누를 때의 동작을 구현하세요:
```javascript
1 // Triggers on hitting delete
2 async function onDeleteImage(image_id) {
3 try {
4 const params = {image_id};
5 const result = await Parse.Cloud.run('deleteGalleryPicture', params);
6 Alert.alert(result);
7 } catch (error) {
8 console.log('Delete Error: ', error);
9 }
10 }
11
```
이제 삭제를 클릭하면, 앱이 `deleteGalleryPicture` 클라우드 함수를 트리거하여 이미지를 성공적으로 삭제합니다:
::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/mMm9rAr2IiwvMWj6WhCiF_image.png" size="50" width="279" height="593" position="center" showCaption="false"}
## 5 - 파일 정리하기
어떤 상황에서는 애플리케이션 파일을 잃어버린 경우 대시보드에서 파일을 삭제해야 합니다. 이는 이 기사에서 언급한 고아 파일을 생성할 때 주로 발생합니다.
애플리케이션 파일을 정리하는 방법에 대한 정보:
1. 다음 시도하세요 [Back4app 파일 관련 자주 묻는 질문](https://help.back4app.com/hc/en-us/articles/360002327652-How-to-delete-files-completely-)
2. 또는 [앱 설정 문서](https://www.back4app.com/docs/parse-dashboard/app-settings)
## 완료!
이 시점에서 클라우드 코드 함수를 성공적으로 배포하고 React Native 애플리케이션에서 이미지를 삭제하는 방법을 배웠습니다.