Counter 컴포넌트 최상단의 View에 flex: 1 스타일을 설정했습니다. 그러면 해당 View가 차지할 수 있는 모든 영역을 차지하겠죠?

그리고 그 안에 있는, numberArea 스타일을 가진 View에도 flex: 1 스타일을 설정했습니다. 그러면 하단의 Button 컴포넌트들이 차지하고 있는 영역을 제외한 모든 영역을 차지하게 됩니다. 여기서 alignItems와 justifyContent 값을 center로 설정했는데, 이 설정은 내용을 정중앙에 보여주겠다는 의미입니다.

여기서 alignItems는 가로 정렬을 의미하고, justifyContent는 세로 정렬을 의미합니다. 만약 이 컴포넌트의 flexDirection을 row로 바꾸면 alignItems가 세로 정렬을 의미하고, justifyContent가 가로 정렬을 의미하게 됩니다. 브라우저에서 flex를 사용해본 적이 없다면 이 개념이 조금 헷갈릴 수 있습니다. 그래도 걱정하지 마세요. 앞으로 flex를 다양하게 사용해보면서 점차 익숙해질 것입니다.

컴포넌트 코드를 다 작성했으면 이 컴포넌트를 App에서 보여주세요.

App.js

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import Counter from './components/Counter';

const App = () => {
  return (
    <SafeAreaView style={styles.full}>
      <Counter />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  full: {
    flex: 1,
  },
});

export default App;