3.1.4 레이아웃 준비하기

DateHead 컴포넌트 개발은 모두 끝났습니다. 이제 하단에 보일 영역의 레이아웃을 잡아주겠습니다.

우선 화면의 최하단에 새 항목을 추가할 수 있는 AddTodo라는 컴포넌트를 배치하겠습니다. 지금은 이 컴포넌트의 높이만 잡아주고, 이 컴포넌트가 차지하는 영역을 바로 볼 수 있도록 배경색을 설정하겠습니다.

components 디렉터리에 AddTodo.js 파일을 생성해 다음 코드를 작성하세요.

components/AddTodo.js

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

function AddTodo() {
  return <View style={styles.block} />;
}

const styles = StyleSheet.create({
  block: {
    height: 64,
    backgroundColor: 'red',
  },
});

export default AddTodo;