리액트 네이티브를 다루는 기술: 2.8.1 UI 준비하기

전체 영역을 차지하고 있음을 확인했다면 backgroundColor 속성은 지워주세요.

다음으로 components 디렉터리에 Counter.js 파일을 생성해 다음과 같이 코드를 작성해주세요.

components/Counter.js

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

function Counter() {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>0</Text>
      </View>
      <Button title="+1" />
      <Button title="-1" />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  numberArea: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  number: {
    fontSize: 72,
    fontWeight: 'bold',
  },
});

export default Counter;

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.