Playlist 구현하기 (3편 : 찜 해제)

@ 찜해제 = UnLike = UnFavorite 등으로 표현하기도 함

@ 플레이리스트 = 찜 목록에서 삭제기능을 만들기 위해 사용함

 

1. 사용조건

 ㄱ. 1편의 찜 기능을 구현했다면 별도로 더 없음 ( 찜 하기 링크 : https://radpro.tistory.com/71 )

 ㄴ. 2편의 찜 목록(=Playlist)에 이어서 작성할 것임 ( 찜 목록 링크 :  )

 

2. 사용원리

 ㄱ.설명 (생략가능)

 : 이름은 UnLike로 했다.

   가장 까다로운 부분중 하나다. realtime database는 user_id 아래로 임의의 키값을 지정하고,

   그 안에 데이터를 push한다. 이는 타임스탬프 등의 기능을 하는 임의의 코드를 만들기 위함이다.

   문제는 해당 키값에 대응하여 선언할 변수를 제공하지 않는다. 미칠노릇이다.

   왜냐하면 경로로 설정할 변수를 제공하지 않는다는 말이기 때문이다.

   따라서 직접 변수를 만들어야한다.

 

 ㄴ. 우선 FlatList에서 선택한 카드가 무엇인지 구분하기 위해 index라는 props를 새로 선언해준다.

 ㄷ. 선언한 index를 UnLike라는 함수에서 사용하기 위해 내보내기 해준다.

 ㄹ. firebase에서 on() 메소드로 데이터를 받아오는 하위 항목에서 Object.keys()를 이용해 키값만 리스트로 모두 받아온다.

      (즉, item로 받아오던 Obeject.values()와 반대의 기능이라 보시면 된다)

 ㅁ. 새로 useState를 선언해주고, 받아온 키값리스트를 setter변수에 할당해준다.

 ㅂ. useState로 받아오는 getter변수를 UnLike함수 안에서 사용할 것이다.

       getter변수[ index ] 형태를 통해, FlatList를 통해 받아온 인덱스 값에 해당하는 키값만 추출해 낸다.

 ㅅ. 추출한 변수를 이용해 firebase.ref( 경로 )로 경로를 지정해준다.

 ㅇ. 상단의 경로 뒤에 .remove()를 붙여주면 완성

 

 

 

 

3. 사용방법

 ㄱ. 경로상 user_id를 찾아야 하므로 constants선언 (LikePage.js 만들때 이미 선언되어있을 것이다.)

const user_id = Constants.installationId;

 ㄴ. FlatList에 index라고 props 선언하고, UnLike함수에 {index} 내보내기

      여기서 index값은 realtime database상의 index값이 아닌, FlatList상의 순서값이다.(0부터 시작하는건 동일)

	return (
		<View style={styles.container}>
		...
			<FlatList
                data={state}
                refreshing={isFetching}
                keyExtractor={(item, index) => index.toString()} 
                // 하단의 renderItem={({item}) 뒤에 , index로 추가해주면 됨
                renderItem={({ item, index }) => (
                    <View style={styles.cardContainer}>
                        <TouchableOpacity style={styles.card} onPress={() => onPress({ item })}>
							...
                                <Text style={styles.cardDate}>{index}</Text>
                                // index넘버 확인하려고 넣은 부분. 생략가능
                            </View>
                            ...
                            // 아래는 찜해제(=UnLike)선언할 부분
                            // 찜하기 기능과 스타일 옵션은 동일하게 진행했다.
                            // 
                            <View style={styles.LikeButton}>
                                <View style={styles.heartBotton}>
                                        <Pressable onPress={() => UnLike({ index })} >
                                        //UnLike함수에 {index}를 태워 보낸다
                                            <AntDesign name="hearto" size={30} color="#999" />
                                            // 빈 하트를 사용했다
                                        </Pressable>
                                </View>
                            </View>

 ㄷ. UnLike를 사용하기 위해 firebase를 불러오는 부분에서 realtime database에서 지정한

       임의의 key값 전체 array를 받아옴. 계속 변화할 값이므로, useState 선언으로 받아옴.

export default function Users() {
	...
	const [fireKey, setFireKey] = useState();
    //필자는 firekey라고 선언했다.
	useEffect(() => {
        setTimeout(() => {
            setLoading(true);
            firebase_db
                .ref(`/본인이_설정한_최상위_key값/${user_id}`)
                .on('value', (snapshot) => {
                    const 원하는_이름 = (snapshot.val());
                    if (원하는_이름 === null) {
                        Alert.alert('<찜 없음>', '목록이 없습니다!')
                    } else {
                    	...
                        setFireKey(Object.keys(원하는_이름))
                        // 데이터 내 모든 realtime database keys
                        ...
                        setLoading(false);
                    }
                })
        }, 300)
    }, []);

 ㄹ. UnLike함수를 선언해주자

    function UnLike({ index }) {
        console.log(fireKey[index])
        // 선택한 item에 해당하는 index에 대응되는 임의의 key값만 추출한 걸 확인차 console.log. 없어도 무방 
        let FBKey = fireKey[index]
        // 선택한 item에 해당하는 index에 대응되는 임의의 key값만 추출하여 치환할 변수지정
        firebase_db.ref(`/like/${user_id}/${FBKey}`).remove()
            .then(() => { Alert.alert('<찜 해제 완료>'); })
        // realtime database 내 경로 맨 끝에 변수를 최하위 경로로 지정해줌.
        // .remove() 명령어를 이용해 해당 노드에 관한 데이터만 삭제해줌
        setFavorite(false);
    }