Playlist 구현하기 (1편 : 찜 기능)

@ 찜 = Like =Favorite 등으로 표현하기도 함

@ 플레이리스트 = 찜 목록 등을 만들기 위해 사용함

 

1. 사용조건

 ㄱ. firebase의 realtime database를 연동한 상태 ( 연동 참고링크 : https://radpro.tistory.com/51 )

 ㄴ. FlatList 사용중인 상태 ( 상단의 참고링크에 같이 되어 있음 )

 ㄷ. expo-constants 설치

yarn add expo-constants

후, 찜하기 기능 사용할 페이지(=scr)에

import Constants from 'expo-constants';

 ㄹ. 아이콘 설치 (기호에 따라 기본 제공되는 버튼태그를 사용해도 무방함)

yarn add @expo/vector-icons

후, 아이콘 사용을 위해 

import { AntDesign } from '@expo/vector-icons';

 ㅁ. 만약 데이터 저장 오류가 난다면, realtiem database내 상단의 규칙탭을 확인해보자

       아래와 같이 write가 true가 되어야 한다.

 

 

2. 사용원리

 ㄱ. realtime database에 원하는 이름의 최상위 키값을 만듦 (여기선 /like라고 함)

 ㄴ. 그 안에 expo-constants를 이용해 user_id를 자동으로 생성해줌

 ㄷ. 그 안에 realtime database에서 임의로 키값을 만들어줌 (타임스탬프 등의 기능을 함)

 ㄹ. 그 안에 내가 선택한 컨텐츠의 value값이 저장됨.

       (만약 원래 데이터가 아래와 같다면, 이중 items이라는 최상위 키값 아래 데이터가 저장됨.)

선택된 데이터 부분

저장되는 DB 구성

 ㅁ. 데이터 선택은 FlatList에서 <Pressable>이라는 태그를 통해 함수를 지정해 반응을 만듦 (여기선 Like라고 함수지정함)

 ㅂ. 지정한 함수를 통해 FlatList에서 데이터를 받아 사용하는 props를 내보내줌 (여기선 {item}이라고 함)

 ㅅ. Like함수에서 realtime database에 저장할 경로를 설정해줌. 이때 user_id지정해주기 위해 아래의 코드 미리 선언함.

      (여기서 필자는 like안에 변수값 user_id를 넣어준 것

const user_id = Constants.installationId;

function Like({ item }) {
	firebase_db.ref(`/like/${user_id}`).push(item)
		.then(() => { Alert.alert('<찜 완료>'); })
}

 

 ㅇ. 상단의 코드와 같이 .push() 명령어를 이용해 DB에 선택학 item에 대한 data를 append해줌

      ( 만약 .set() 또는 .updata() 명령어를 사용할 경우, 기존 데이터가 지워짐)

 ㅈ. .then() 명령어를 사용하여 찜이 되었을 경우 알림창을 설정해줌 (선택사항)

 

 

3. 사용방법

 ㄱ. firebase를 연동해줌.

import { firebase_db } from '../firebaseConfig';
...
export default function Users() {
	...
    const [loading, setLoading] = useState(true);
    const [state, setState] = useState([])
    const user_id = Constants.installationId;
    ...
    
    useEffect(() => {
        setTimeout(() => {
            setLoading(true);
            firebase_db
                .ref('/본인의_JSON_DATA_최상위key값')
                .on('value', (snapshot) => {
                    console.log("OOO에서 데이터 가져왔습니다!!")
                    const items = (snapshot.val());
                    setState(본인의_JSON_DATA_최상위key값)
                    ...
                    setLoading(false);
                })
        }, 300)
    }, []);

 ㄴ. return문에 FlatList를 구성해줌 (렌더링 파트)

    return (
        <View style={styles.container}>
        ...
			<FlatList
                data={state}
                // setState( )를 통해 firebase에서 데이터를 받아온다.
                keyExtractor={(item, index) => index}
                // 없어도 무방함
                // 아래의 index는 인덱스 번호 확인하기위함. 없어도 무방함
                // 아래의 item은 data={state}로 받은 state를 대체해주는 내부변수다. 원하는 이름 쓰면 되지만 일반적으로 item쓰는게 룰이다.
                renderItem={({ item, index }) => (
                    <View style={styles.cardContainer}>
                        <TouchableOpacity style={styles.card} onPress={() => onPress({ item, index })}>
                            <Image style={styles.cardImage} source={{ uri: item.snippet.thumbnails.medium.url }} />
                            // 상단의 이미지 경로는 실제 DB의 items.index.snippet...url과 동일하다.
                            <View style={styles.cardText}>
                                <Text style={styles.cardTitle} numberOfLines={1}>{item.snippet.title}</Text>
								...
                                <Text style={styles.cardDate} >{index}</Text>
                                // 인덱스를 가시화해주는 부분. 없어도 무방함 
                            </View>
                            ...
                            // 아래 부분이 Like를 위한 렌더링 파트
                            <View style={styles.LikeButton}>
                                <View style={styles.heartBotton}>
                                    <Pressable onPress={() => Like({ item })} >
                                    // onPress를 통해 반응할 Like함수에 {item}을 태워 보내면 된다
                                        <AntDesign name="heart" size={30} color="#eb4b4b" />
                                        // 아이콘 지정
                                    </Pressable>
                                </View>
                            </View>
                        </TouchableOpacity>
                    </View >
                )
                } />
        </View >
    );
...
}

// 레이아웃 스타일 옵션 부분 (필자는 가운데 정렬만 했다)
const styles = StyleSheet.create({
	...
        heartBotton: {
        alignItems: "center",
        justifyContent: "center"
    },
    LikeButton: {
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
    }
});

 ㄷ. Like 함수 선언부

    function Like({ item }) {
        firebase_db.ref(`/like/${user_id}`).push(item)
            .then(() => { Alert.alert('<찜 완료>'); })
    }
    
    // 함수이므로 function이고, Like에 태워 보낸 {item}를 받아준다.
    // 저장할 경로를 지정해주고, .push( )로 item에 대응되는 데이터를 DB에 append해준다.
    // .then( )명령어를 통한 알림창 설정은 본인 취향에 따라 지정한다.