Playlist 구현하기 (2편 : 찜 목록)

@ 찜목록 = Likepage = Playlist 등으로 표현

@ 찜 하기를 통해 저장된 data를 가시화 하기 위한 화면(=scr) 렌더링

@ 찜 해제로 데이터 삭제 기능을 넣을 곳

 

1. 사용조건

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

 ㄴ. 3편의 찜 해제 기능을 넣을 화면을 미리 구성하는 것 ( 찜 해제 링크 : https://radpro.tistory.com/72 )

 ㄷ. firebase를 연동해두자 ( 이는 ㄱ의 링크에 있는 firebse연동 링크를 참고하자)

 ㄹ. 만약 데이터가 정상적으로 읽히지 않는다면, 아래와 같이 realtime database의 규칙탭을 확인해보자

       read가 true가 되어야 읽힌다.

 

2. 사용원리

 ㄱ. 찜 하기를 통해 firebase내 realtime database에 저장한 JSON 데이터를 사용한다.

 ㄴ. 기존 firebase에서 데이터를 받아오는 형식을 개량해서 사용할 것이다.

 ㄷ. 경로지정 후 데이터를 얻어오기 위해 Object.valuse라는 문법을 사용할 것이다

 ㄹ. FlatList의 렌더링은 1편 링크의 FlatList와 동일하다.

 ㅁ. 경로설명

  : firebaseConfig.js를 허브로 사용하여 데이터를 받아올 것이며,

   이를 firebase라는 이름으로 export한것을 import해와 사용한다.

   .ref( ) 명령어를 이용해 user_id에 해당하는 경로까지 참조해온다.

   .on( A , B ) 명령어의 A부분에는 총 5가지 형식으로 기입이 가능한데 여기선 '"value"를 사용할 것이다.

    (*나머지는 아래에 따로 적어두겠다.)

    value값은 다음 이미지에 체크해둔 부분이다. 즉, 임의의 key값 : 찜(push)으로 저장된 value값

  B 부분에는 snapshot을 통해 "value"로부터 받아올 조건과 반환값 등을 작성해준다.

  여기서 우리는 key값을 벗겨서 value값만 필요하기에,

  Object.values( ) 문법을 사용하여 붉은색 부분에서 value만 추출해낸다.

  이를 setState를 통해 FlatList에 value값에 해당하는 data를 item에 대응시켜 출력하는 것이다.  

*on( A, B ) 명령어의 A 부분에 들어갈 수 있는 다섯가지 조건
"value"	.ref()를 통해 참조한 경로아래 value값 전체
"child_added"	참조한 경로 바로 아래 key값에 대응하는 value값 중, 추가되는 데이터만 보여줌 (더해지는 로그) 즉, value값의 value값으로 추가되는 누적데이터를 보여줌
"child_changed"	참조한 경로 바로 아래 key값에 대응하는 value값 중, 변화되는 데이터만 보여줌 (변화되는 로그) 즉, value값의 value값의 변화되는 누적데이터를 보여줌
"child_removed"	참조한 경로 바로 아래 key값에 대응하는 value값 중, 지워지는 데이터만 보여줌(지워지는 로그) 즉, value값의 value값에서 제거되는 누적데이터를 보여줌
"child_updated"	참조한 경로 바로 아래 key값에 대응하는 value값 중, 갱신되는 데이터만 보여줌(갱신되는 로그) 즉, value값의 value값에서 갱신되는 누적데이터를 보여줌

 

 

3. 사용방법

 ㄱ. 찜한 data를 불러오기위해 firebase API를 사용할 것이다.

      단, 여기서 data를 읽어오기위한 명령어가 몇가지 있는데, 실시간 변화에 따른 반환값을 얻기위해

      기본제공 API에서 .once()를 .on()명령어 방식으로 개량해 사용한다.

      user_id를 읽기 위해서 expo-constants 명령어를 선언해준다.

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { ActivityIndicator, FlatList, View, Text, Image, StyleSheet, TouchableOpacity, TextInput, Pressable, Alert } from 'react-native';
import { firebase_db } from '../firebaseConfig';
import YoutubePlayer from "react-native-youtube-iframe";
import { AntDesign } from '@expo/vector-icons';
import Constants from 'expo-constants';

export default function Users() {
	...
	const [loading, setLoading] = useState(true);
    const [state, setState] = useState([])
    const [error, setError] = useState(null);
	...
	const user_id = Constants.installationId;
    // user_id를 받기위한 선언부
    
	useEffect(() => {
        setTimeout(() => {
            setLoading(true);
            firebase_db
                .ref(`/like/${user_id}`)
                .on('value', (snapshot) => {
                    const Like_List = (snapshot.val());
                    if (Like_List === null) {
                        Alert.alert('<찜 없음>', '목록이 없습니다!')
                    } else {
                    	...
                        setState(Object.values(Like_List))
                        ...
                        setLoading(false);
                    }
                })
        }, 300)
    }, []);

 ㄴ. FlatList에서 받아온 data를 렌더링시켜주자

    return (
        <View style={styles.container}>
            ...
            <FlatList
                data={state}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item }) => (
                    <View style={styles.cardContainer}>
                        <TouchableOpacity style={styles.card} onPress={() => onPress({ item })}>
                            <Image style={styles.cardImage} source={{ uri: item.snippet.thumbnails.medium.url }} />
                            <View style={styles.cardText}>
                                <Text style={styles.cardTitle} numberOfLines={1}>{item.snippet.title}</Text>
                                <Text style={styles.cardDesc} numberOfLines={3}>{item.snippet.description}</Text>
                                <Text style={styles.cardDate}>{item.snippet.publishedAt}</Text>
                                <Text style={styles.cardDate}>{item.id.videoId}</Text>
                                ...
                            </View>
                            ...
                        </TouchableOpacity>
                    </View >
                )}
            />
        </View >
    );
...
}

 ㄷ. 기호에 따라 스타일 옵션을 지정해주자

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    cardContainer: {
        backgroundColor: '#fff',
    },
    card: {
        flex: 1,
        flexDirection: "row",
        margin: 10,
        borderBottomWidth: 0.5,
        borderBottomColor: "#eee",
        paddingBottom: 10
    },
    cardImage: {
        flex: 1,
        width: 100,
        height: 100,
        borderRadius: 10,
    },
    cardText: {
        flex: 2,
        flexDirection: "column",
        marginLeft: 10,
    },
    cardTitle: {
        fontSize: 20,
        fontWeight: "700"
    },
    cardDesc: {
        fontSize: 15
    },
    cardDate: {
        fontSize: 10,
        color: "#A6A6A6",
    },
    textContainer: {
        backgroundColor: '#fff',
        paddingHorizontal: 20,
        fontSize: 20,
        margin: 10,
    },
    ...
    heartBotton: {
        alignItems: "center",
        justifyContent: "center"
    },
    LikeButton: {
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
    }
});