JS map 함수를 통한 반복

app.jsx

import { StatusBar } from "expo-status-bar";
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import data from "./data.json";

export default function App() {
  const [makingState, setMakingState] = useState(data.diary);

  useEffect(() => {
    setMakingState(data.diary);
  }, []);

  return (
    // ScrollView에서 flex 옷을 입히려면 contentContainerStyle 속성에 스타일 이름을 연결 시켜줘야 한다.
    <ScrollView contentContainerStyle={styles.container}>
      <StatusBar style="light" />
      {makingState.map((content, i) => {
        return (
          <View key={i}>
            <Text style={styles.textBox}>{content.title}</Text>
          </View>
        );
      })}
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "midnightblue",
    alignItems: "center",
    justifyContent: "center",
  },
  textBox: {
    color: "white",
  },
  counterBtn: {
    flexDirection:'row'
  },
  counterBox: {
    height: 50,
    width: 70,
    backgroundColor: "white",
    marginVertical: 20,
  },
  boxText: {
    marginTop: 15,
    textAlign: "center",
  },
});

data.json

{
    "diary": [{
        "id": 0,
        "title": "...",
        "author": "...,
        "desc": "...",
        "image": "..."
    }, {
        "id": 1,
        "title": "...",
        "author": "...",
        "desc": "...",
        "image": "..."
    }, {...}
}       

형태의 json파일에서 map함수로 반복적으로 랜더링하기 위한 예제
key를 넣어주는 것이 포인트인듯 하다.