React-Native [3. json과 map 함수]

MainPage.js

.
.
.

import data from "../data.json";

export default function MainPage() {
  console.disableYellowBox = true;

  let tip = data.tip;
  let todayWeather = 10 + 17;
  let todayCondition = "흐림";

.
.
.

<View style={styles.cardContainer}>
        {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>
  );
}

.
.
.

data.json
{
    "tip":[
        {
            "idx":0,
            "category":"생활",
            "title":"조던 로고",
            "image":"https://www.nicekicks.com/files/2014/10/air-jordan-logo-667x500.jpg",
            "desc":"가장 유명한 로고다. 조던이 공중에 뛰어있는 모습을 형상화했다.정확히 어떤 상황인지는 찾아봐야함...",
            "date":"2022.03.30"
        },
        {
            "idx":1,
            "category":"생활",
            "title":"바나나를 싱싱하게 보관하기",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/banana.png",
            "desc":"바나나에 날파리가 꼬이거나 금방 익어버리는 것을 예방하기 위한 방법인데요. 바나나 양쪽 끝을 자른 후, 보관용 케이스나 비닐봉지에 묶어 밀봉합니다. 그리고 냉장고에 넣어주면 되는데요. 하루에 1~2개씩 꺼내서 싱싱하게 먹을 수 있습니다.",
            "date":"2020.09.09"
        },
        
.
.
.

json 다루기

어떤 데이터가 필요한지 나누어서 생성

딕셔너리{}의 키는 무엇으로 할것인지, 그 키에 해당하는 리스트[]에는 또 어떠한 딕셔너리/리스트/키/값으로 구성되어있을지 잘 나누어서 선언

사용할 페이지에서 선언 후 키 값을 참조하여 사용

예시처럼 let tip = data.tip 을 보면 data.json을 data로 선언한 후, data의 키값인 tip의 리스트를 가져와 tip으로 선언하였다.

map 함수 사용하기

리스트를 순차적으로 돌며 사용할때 유용하다 (마치 for문처럼)
리스트.map(화살표함수) 등을 사용해 어떠한 반복문을 return할 수 있다.
key가 무엇인지 꼭 선언해야한다!