[React-Native] FlatList로 Json 스크롤해서 보기

안녕하세요 세히이 입니다 저번에 썼던 json 가져오기를 보고 오시면 더욱 이해가 잘 될 것 같아요 :)

 

FlatList는 언제 써야 하는가 ?

모든 데이터를 한번에 렌더링하는 것이 아니라

사용자가 swipe를 할 때 swipe한 화면의 크기만큼 자동으로 리렌더링이 되어 보여지는 컴포넌트

데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우에 사용하기 적절하다.

 

View 속성 비교하기

RecyclerListView 도 써보고 싶었는데 너무 자료가 없어서 아직 못했어요 ㅠ 성공하면 포스팅 해보겠습니당

---

• 참고한 코드

return (
    <FlatList
      data={data}
      renderItem={({item, i}) => (
        <View style={styles.container} key={i}>
          <View>
            <Image style={styles.logo} source ={moon}/>
          </View>  
        </View>
      )}
    />
  );

 

React에서는 map으로 돌려서 GetRepairList 클래스를 만들어주어 뿌려주는 방식으로 했지만
React-Native의 FlatList는 map의 역할과 비슷하므로 Product 클래스 안에서 모든걸 해결했다!

 

1) 필요한 컴포넌트 Import 시켜주기

import React, { Component } from "react";
import { StyleSheet,ScrollView, Text, View ,Button,FlatList } from 'react-native';
import Constant from "../util/constant_variables";
import WebServiceManager from "../util/webservice_manager";

2) json을 담아줄 배열 변수 goodsContents 선언

this.state={goodsContents:[]}

3) json을 가져올 async(비동기)인 스레드를 생성

async callGetRepairAPI() {
        let manager = new WebServiceManager(Constant.serviceURL+"/GetGoods");
        let response = await manager.start();
        console.log(response);//헤더포함한 response message
        if(response.ok)
            return response.json();
        else
            Promise.reject(response);
}

4) json을 안드로이드 화면에 뿌려주는데 스크롤이 될 수 있게 FlatList로 뿌려준다

render() {
        return(
          <>
          <View>
            <Text>
            이름 상품명 상품설명 가격
            </Text>
          </View>
          <FlatList
          data={this.state.goodsContents}
          renderItem={({item}) => (
            <View>
              <Text>
                {item.name}
                {item.title}
                {item.content}
                {item.price}
              </Text>
             </View>
          )}
        />
        </>
        );
    }

전체 코드

import React, { Component } from "react";
import { StyleSheet,ScrollView, Text, View ,SafeAreaView,StatusBar ,Button,FlatList } from 'react-native';
import Constant from "../util/constant_variables";
import WebServiceManager from "../util/webservice_manager";

class Product extends Component {

    constructor(props) {
        super(props);

        this.state={goodsContents:[]}
    }

    componentDidMount() {
        this.callGetRepairAPI().then((response) => {
            console.log(response);//response는 json자체       
            this.setState({goodsContents:response.goods});
        });
    }

    async callGetRepairAPI() {
        let manager = new WebServiceManager(Constant.serviceURL+"/GetGoods");
        let response = await manager.start();
        console.log(response);//헤더포함한 response message
        if(response.ok)
            return response.json();
        else
            Promise.reject(response);
    }

    render() {
        return(
          <>
          <View>
            <Text>
            이름   상품명      상품설명                       가격
            </Text>
          </View>
          <FlatList
          data={this.state.goodsContents}
          renderItem={({item}) => (
            <View>
              <Text>
                {item.name}
                {item.title}
                {item.content}
                {item.price}
              </Text>  
            </View>
          )}
        />
        </>
        );
    }
}

결과화면