map 함수

let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})

개발무지랭이인 나는 위의 value, i 부분이 달라져도 괜찮은지 테스트를 해봤다

numbers.map((i,value) => { 
	console.log(value,i) 
})

이렇게 설정하면 값은 아래와 같이 나온다
결론은 앞 부분이 무조건 value고 뒷 부분이 무조건 i의 수다

0 1
1 2
2 3
3 4
4 5
5 6
6 7

실제 활용

return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
      <Image style={styles.mainImage} source={main}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
      </ScrollView>
      <View style={styles.cardContainer}>
         {/* 하나의 카드 영역을 나타내는 View */}
         { // map(value, i) 이것의 의미는 
          tip.map((content,i)=>{
            return (<View style={styles.card} key={i}>
              <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>
              </View>
            </View>)
          })
         }
      </View>
    </ScrollView>
  );
}

특징

• map 함수 돌리는 부분에 return으로 감쌈

• 가장 최상위 감싸는 것에는 key 값이 주어저야 한다
  그 key 값은 유니크해야 하는데 결국 인덱스 넘버 i 값이 유니크하기 때문에 이걸 넣는다

• <Text>
   이 사이에 값을 넣을 때도 그냥 넣으면 안 되고 {여기 안에 value.해당 key 이름을 넣어야 함} 
  </Text>
  

• 사용 방법

{
json.map((value, i) => {
return (
<Tag key={i}> 
</Tag>
)
})
}

추가 예제

return (
        <ScrollView style={styles.container}>
           {
               tip.map((content,i)=>{
                   return(<LikeCard key={i} content={content} navigation={navigation}/>)
               })
           }
        </ScrollView>
    )

이렇게 LikeCard라는 페이지를 넣어서 map을 할 수 있음
참고로 map안에 태그가 여러개라면 이때도 JSX문법을 따르기 때문에 부모태그가 있어야 함