이 컴포넌트에서는 게시글 배열을 Props로 받아와서 FlatList를 사용해 화면에 보여줍니다. 지금은 아직 FlatList에서 renderItem 부분을 구현하지 않은 상태입니다.
각 게시글의 제목, 작성자, 날짜를 보여줄 ArticleItem 컴포넌트를 만들어봅시다. components 디렉터리에 ArticleItem.tsx 컴포넌트를 생성하세요.
components/ArticleItem.tsx
import React from 'react'; import {StyleSheet, Pressable, Text, View, Platform} from 'react-native'; export interface ArticleItemProps { id ; title ; publishedAt ; username ; } function ({id, title, publishedAt, username} ArticleItemProps) { const () => { // TODO: 눌렀을 때 게시글 열기 console. (id); }; const formattedDate new Date(publishedAt). (); return ( <Pressable style={({pressed}) => [ styles.block, Platform.OS === 'ios' && pressed && styles.pressed, ]} onPress={onPress} android_ripple={{color '#eeeeee'}}> <Text style={styles.title}>{title}</Text> <View style={styles.footer}> <Text style={styles.smallText}>{username}</Text> <Text style={styles.smallText}>{formattedDate}</Text> </View> </Pressable> ); } const styles StyleSheet. ({ block { paddingVertical 16, paddingHorizontal 12, backgroundColor 'white', }, pressed { backgroundColor '#eeeeee', }, title { fontSize 14, fontWeight 'bold', }, footer { marginTop 16, }, smallText { fontSize 10, color '#546e7a', }, }); export default ArticleItem;