3.1.2 오늘 날짜를 알려주는 DateHead 컴포넌트 만들기

첫 번째로 만들 컴포넌트는 오늘 날짜를 알려주는 DateHead 컴포넌트입니다.

▲ 그림 3-3 DateHead 컴포넌트

우선 최상위 디렉터리에 components 디렉터리를 만드세요. 그리고 그 안에 DateHead.js 파일을 생성해 다음 코드를 작성하세요.

components/DateHead.js

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

function DateHead() {
  return (
    <View style={styles.block}>
      <Text style={styles.dateText}>2021년 5월 3일</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    padding: 16,
    backgroundColor: '#26a69a',
  },
  dateText: {
    fontSize: 24,
    color: 'white',
  },
});

export default DateHead;