[React-Native] 리액트 네이티브 FlatList

웹의 문제점중 하나인 부분이 있는데요!

 

한번에 값들을 전부 받아서 돌리기때문에 상대적으로 느리게 표현됩니다.

 

하지만 앱에서는 조금 다르게 동작하여야합니다. 값들을 불러오면서 느려지거나 화면이 안보이는 문제가 있습니다.

 

그래서 리액트 네이티브에서는 FlatList를 사용하여 보여지는 부분만 불러오고 다른부분은 보여지지않게 함으로써 느려짐 현상을 없애줍니다.

 

이게 FlatList를 사용해야하는 이유라고 할 수 있습니다.

 

그럼 어떻게 사용되는지 간단히 한번 살펴볼까요?

import React from 'react';
import styled from 'styled-components/native';
import { useNavigation } from '@react-navigation/native';
import { SafeAreaView, FlatList } from 'react-native';
// FlatList를 import 합니다
// 아래는 css입니다.
const ContainerView = styled.ScrollView`
  width: 100%;
  padding: 24px;
`;
const FlatContainerView = styled.View`
  width: 100%;
  padding: 24px;
`;
const ArticleBoxGroup = styled.View`
  display: flex;
  flex-direction: row;
  align-items: center;
`;
const ArticleBoxGroupBettwen = styled.View`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;
const ArticleBoxGroupImage = styled.Image`
  width: 56px;
  height: 56px;
  border-radius: 8px;
  padding: 5px;
  margin-right: 16px;
`;
const ArticleBoxGroupText = styled.Text`
  font-size: 18px;
  font-weight: bold;
  line-height: 21px;
  color: #000000;
`;
const ArticleBoxGroupSubText = styled.Text`
  font-size: 18px;
  line-height: 21px;
  color: #000000;
`;
const NomalView = styled.View`
`;
const ArticleBoxGroupIcon = styled.Image`
  width: 20px;
  height: 20px;
`;
// class 정의
class test extends React.Component {
  constructor(props) {
    super(props);
    // 변수
    this.state = {
      listItem: [
        { title: 'aaaa', id: '1' },
        { title: 'bbbb', id: '2' },
        { title: 'cccc', id: '3' },
        { title: 'dddd', id: '4' },
        { title: 'eeee', id: '5' },
        { title: 'ffff', id: '6' },
        { title: 'gggg', id: '7' },
      ]
    };
  }
  _keyExtra = (item) => item.id;
  render() {
    return (
      <SafeAreaView>
        <FlatList
          keyExtractor={this._keyExtra}
          data={this.state.listItem}
          renderItem={({item}) =>
          <ArticleBoxGroupBettwen>
            <ArticleBoxGroup>
              <ArticleBoxGroupImage source={require('../assets/favicon.png')} resizeMode="cover"/>
              <NomalView>
                <ArticleBoxGroupText>₩ 7,900</ArticleBoxGroupText>
                <ArticleBoxGroupSubText>{item.title}</ArticleBoxGroupSubText>
              </NomalView>
            </ArticleBoxGroup>
          </ArticleBoxGroupBettwen>
          }
        />
      </SafeAreaView>
    );
  }
}
export default function (props) {
  const navigation = useNavigation();

  return <test {...props} navigation={navigation} />
}

코드 한페이지를 전부 넣어두었습니다.

 

위의 코드중 FlatList를 중점으로 보시면 됩니다.