import React from 'react';
import {Alert,View, Image, Text, StyleSheet,TouchableOpacity,Platform} from 'react-native'
import {firebase_db} from "../firebaseConfig"
const isIOS = Platform.OS === 'ios';
import * as Application from 'expo-application';


//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function LikeCard({content,navigation,zzim,setZzim}){
((질문1.))
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 
코드 시작할때({   ,   ,   }) 이런식으로 가져오는 변수들은 왜 일일이 하나씩 넣어주는 것인가요?
저렇게 해야만 쓸 수 있는 건가요? 맨 윗부분에 import로 어떤 페이지(main.js)를 불러온다고 해도
여전히 변수를 하나하나 불러와 줘야하나요??
그리고 어느변수가 어느 페이지에 있는지 컴퓨터는 어떻게 알아차리나요...? 
만약에 content라는 변수가 다른 .js에서 중복으로 사용되면 에러가 안나나요??????
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 


  const del = async (cidx) => {
        
    let userUniqueId;
    if(isIOS){
    let iosId = await Application.getIosIdForVendorAsync();
        userUniqueId = iosId
    }else{
        userUniqueId = await Application.androidId
    }


    firebase_db.ref('/like/'+userUniqueId+'/'+ cidx).remove().then(function(){
      Alert.alert("삭제 완료");


      let result = zzim.filter((data,i)=>{
        return data.idx !== cidx})
    
((질문2. ))
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 
위에 retrun에서 쓰인 .idx는 어디서 나온 것인가요? data.i 가 아니라 data.idx인 이유는 무엇인지 궁금합니다.
이 페이지 어디에도 idx가 뭔지 알려주는 부분이 없는데 어째서 .idx로 적는 것일까요??
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 

      setZzim(result)
     })
    }



    return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        <View style={styles.card}>
            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
            <TouchableOpacity onPress={()=>{navigation.navigate('DetailPage', {idx:content.idx})}}><Text>'자세히보기'</Text></TouchableOpacity>
            <TouchableOpacity onPress={()=>del(content.idx)}><Text>'찜 해제'</Text></TouchableOpacity>
            </View>
        </View>
    )
}



const styles = StyleSheet.create({
    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",
    }
})

튜터님 안녕하세요?

제가 정확한 사용법을 모르다보니 코드를 복붙하고 나서도 여전히 이해가 안되는 부분이 많습니다.

위의 코드 안에 궁금한 부분을 적어봤는데 혹시 답을 주실 수 있으실까요? ;-;....?