더북(TheBook)

Articles 컴포넌트에서 showWriteButton Prop의 값이 true일 때 방금 만든 버튼이 나타나도록 구현해보세요.

components/Articles.tsx

(...)
import WriteButton from './WriteButton';

export interface ArticlesProps {
  articles: Article[];
  showWriteButton?: boolean;
}

function Articles({articles, showWriteButton}: ArticlesProps) {
  return (
    <FlatList
     (...)
      ListHeaderComponent={() => (showWriteButton ? <WriteButton /> : null)}
      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;
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.