15.5.4 컴포넌트 만들기

게시글의 정보를 보여줄 컴포넌트와 댓글 목록을 보여줄 컴포넌트를 준비합시다. 우선 components 디렉터리에 ArticleView 컴포넌트를 다음과 같이 작성해보세요.

components/ArticleView.tsx

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

export interface ArticleViewProps {
  title: string;
  body: string;
  publishedAt: string;
  username: string;
}

function ArticleView({title, body, publishedAt, username}: ArticleViewProps) {
  const formattedDate = new Date(publishedAt).toLocaleString();

  return (
    <View style={styles.block}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.username}>{username}</Text>
      <Text style={styles.date}>{formattedDate}</Text>
      <View style={styles.separator} />
      <Text>{body}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    paddingTop: 24,
    paddingBottom: 64,
    borderBottomColor: '#eeeeee',
    borderBottomWidth: 1,
    marginBottom: 16,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  username: {
    fontSize: 12,
    marginTop: 16,
    fontWeight: 'bold',
  },
  date: {
    marginTop: 4,
    fontSize: 12,
    color: '#546e7a',
  },
  separator: {
    marginTop: 24,
    marginBottom: 24,
    height: 1,
    backgroundColor: '#eeeeee',
  },
});

export default ArticleView;