[실패일지] ScrollView를 Infinite Flatlist로 대체하기

1. 목적 

: Scrollview가 구현은 편하지만, 로딩이 너무 길다.

 인스타나 쇼핑앱 같은 무한 스크롤을 구현하는 것이 데이터 관리도 쉽다.

 무엇보다도 FlatList에대한 이해도가 떨어진다. 처음부터 다 뜯어보며 이해해보자.

 (ScrollView와 Flatlist을 상황에 따른 사용목적이 다르기 때문)

 

**중간점검 : 애당초 ScrollView + map함수가 한 쌍이다.

   FlatList는 map함수를 쓰지 않는다.

   즉, 기존에 firebase.js에서 map함수로 firebase의 json데이터를 받아,

   card.js로 렌더링 하던 것을 다 갈아 엎어야 할거같다.

   Flatlist의 경우, data=[ ] 로 데이터를 받아, renderItem으로 렌더링 해주는 것.

   새로만들게 생겼다.

   이것도 다 연습이고 경험이다. 다시 ㄱㄱ.

 

2. 실험시작

우선, 프로젝트진행중인 앱에 추가적으로 실험실 탭을 하나 개설했다.

참고링크는 아래의 글이다.

https://steemit.com/kr/@anpigon/react-native-flatlist-infinite-scroll-pull-down-refresh

[React Native] FlatList으로 Infinite Scroll와 Pull Down Refresh 구현하기 — Steemit

 

시도1 :

우선 상단의 링크에서 기본 코드를 따왔다.

FlatList만 구현한 상태.js

import React from 'react';
import {
  View,
  Image,
  Text,
    FlatList, // here
} from 'react-native';

export default class App extends React.Component {

  state = {
    data: [1, 2, 3]
  }

  _getData = async () => {
    const url = 'https://jsonplaceholder.typicode.com/photos?_limit=10';
    fetch(url)
      .then(res => res.json())
      .then(json => {
        this.setState({ 
          data: json 
        });
      });
  }

  componentDidMount() {
    this._getData();
  }

  _renderItem = ({item}) => (
    <View style={{borderBottomWidth:1, marginTop: 20}}>
      <Image source={{ uri: item.url }} style={{ height: 200}} />
      <Text>{item.title}</Text>
    </View>
  );

  render() {
    return (
      <FlatList 
        data={this.state.data}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => item.id}
      />
    );
  }
}

이 뼈대를 토대로 Firebase와 Card.js를 연동해보고자 한다.

파이어베이스 연동을 위해 firebaseConfig.js연동 코드를 입력했으나 실패.

원래는 url로 따오던 json파일을 firebase로 연동해야 하는 데 쉽지 않다.

파이어베이스의 최상단 키값으 items이고, 이를 useState를 이용하여 content라는 변수에 대입해줘야 하는데

난독증이온다.

firebase부터 연동해보기

import React from 'react';
import { View, Image, Text, FlatList } from 'react-native';

export default class App extends React.Component {

    state = {
        data: [1, 2, 3]
    }

    _getData = async () => {

        const [state, setState] = useState([])

        useEffect(() => {
            // console.log(route)
            setTimeout(() => {
                // const { idx } = route.params;
                firebase_db.ref('/items').once('value').then((snapshot) => {
                    console.log("파이어베이스에서 데이터 가져왔습니다!!")
                    let items = snapshot.val();

                    setState(items)

                });
            }, 1000)
        }, [])


        const content = { items };
        fetch(content)
            .then(res => res.json())
            .then(json => {
                this.setState({
                    data: json
                });
            });
    }

    componentDidMount() {
        this._getData();
    }

    _renderItem = ({ item }) => (
        <View style={{ borderBottomWidth: 1, marginTop: 20 }}>
            <Image source={{ uri: content.snippet.thumbnails.medium.url }} style={{ height: 200 }} />
            <Text>{item.title}</Text>
        </View>
    );

    render() {
        return (
            <FlatList
                data={this.state.data}
                renderItem={this._renderItem}
                keyExtractor={(item, index) => item.id}
            />
        );
    }
}

 

시도 2 : 구글링을 통해 Flatlist를 이용한 사례찾아보고 내식대로 조합해봤다(성공)

우선, 공식문서 Flatlist 모듈을 이용했다.

이후 훅을 만들어 줬다. 두 개의 useState를 선언해주고(로딩용과 데이터 받기용),

Scrollview때처럼 useEffect를 이용하여 firebaseConfig.js로부터 데이터를 불러왔다.

추가로 구글링중 보고 맘에들게 된 ActivityIndicator도 넣어줬다.

기존에 <ScrollView>에서 map함수를 이용해 <Card>컴포넌트를 레이아웃삼아 return했던 정보는,

이제 <FlatList>태그를 이용해 불러오고, renderItem이란 props로 레이아웃을 만들어줘야한다.

(개인적으로 StyleSheet가 편해서 선호하지만.. FlatList를 쓰려면 어쩔수 없나.. 나중에 적용방법을 고안해내야겠다)

다행이도 이번 Flatlist를 Hook으로 구현한 덕분에 infinite scroll도 같이 구현했다.

 

여기서 추가로 수정하고 싶은것

 1) Flatlist를 Card.js라는 컴포넌트를 이용해 렌더링 하기

 2) TouchableOpacity를 넣어 onPress기능 다시 구현하기 >> iframe연동의 숙제가..

 3) 렌더링으로 레이아웃 다시 만들기

 4) Search bar 연동하기

InfiniteFlatList.js

import React, { useState, useEffect } from 'react';
import { ActivityIndicator, FlatList, View, Text, Image } from 'react-native';
import { firebase_db } from '../firebaseConfig';

export default function Users() {
  const [loading, setLoading] = useState(true); // Set loading to true on component mount
  const [state, setState] = useState([])

  useEffect(() => {
    firebase_db.ref('/items').once('value').then((snapshot) => {
        console.log("파이어베이스에서 데이터 가져왔습니다!!")
        let items = snapshot.val();

        setState(items)
        setLoading(false);
      });
  
    // Unsubscribe from events when no longer in use
    return () => subscriber();
  }, []);


  if (loading) {
    return <ActivityIndicator />;
  }
//ActivityIndicator는 로딩 중 돌아가는 동그라미

  return (
    <FlatList
      data={state}
      renderItem={({ item }) => (
        <View style={{ height: 50, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>User ID: {item.snippet.title}</Text>
            <Text>User Name: {item.snippet.channelId}</Text>
        </View>
      )}
    />
  );
}