15.4.3 컴포넌트 만들기

데이터가 준비됐으니 이에 맞춰 컴포넌트를 만들어봅시다.

components 디렉터리를 만들고, Articles 컴포넌트를 작성하세요.

components/Articles.tsx

import React from 'react';
import {View, StyleSheet, FlatList} from 'react-native';
import {Article} from '../api/types';

export interface ArticlesProps {
  articles: Article[];
}

function Articles({articles}: ArticlesProps) {
  // TODO: renderItem 구현 예정
  return (
    <FlatList
      data={articles}
      renderItem={() => null}
      keyExtractor={(item) => item.id.toString()}
      style={styles.list}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListFooterComponent={() =>
        // articles가 1개 이상 있을 때만 최하단 테두리 보여주기
        articles.length > 0 ? <View style={styles.separator} /> : null
      }
    />
  );
}

const styles = StyleSheet.create({
  list: {
    flex: 1,
  },
  separator: {
    width: '100%',
    height: 1,
    backgroundColor: '#cfd8dc',
  },
});

export default Articles;