내가 만들고싶은 앱 1 - 숫자 더하고 빼기 2편

프로젝트가 완성 됐다면 다음단계를 진행해보자.

 

우선 전체화면이 좋으니 전체화면모드로 바꿔준다.

 

function App(): JSX.Element {
  return (
    <>
      <StatusBar hidden />
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text>테스트</Text>
        </View>
        <View style={styles.main}>
          <Text>메인</Text>
        </View>
        <View style={styles.footer}>
          <Text>푸터</Text>
        </View>
      </SafeAreaView>
    </>
  );
}

중요한 부분은 StatusBar hidden이다.

 

좌측 아이폰 / 우측 안드로이드

기존에는 styles가 app.tsx안에 있었는데, 따로 파일을 분리해보자.

 

나같은 경우에는 style이라는 폴더에 appStyles.ts 파일을 만들어서 거기에 저장했다.

 

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flex: 3,
  },
  main: {
    flex: 2,
  },
  footer: {
    flex: 5,
  },
});

export default styles;

 

 

다음 분리해줄건, 각각 View를 컴포넌트화 시켜서 app.tsx가 정말 단순하게 정리를 해볼 예정이다.

 

그러면 component 라는 폴더를 만들고,

Header.tsx, Main.tsx, Footer.tsx 파일을 각각 만들어서 import 시켜보자.

 

 

이런식으로 만들어질 것이다.

그럼 이제 원래 return으로 내보내줬던 작업을 해준다.

 

import React from 'react';
import {Text, View} from 'react-native';
import styles from '../style/appStyles';

function Header(): JSX.Element {
  return (
    <View style={styles.header}>
      <Text>헤더입니다.</Text>
    </View>
  );
}

export default Header;

 

 

Header.tsx

 

import React from 'react';
import {Text, View} from 'react-native';
import styles from '../style/appStyles';

function Main(): JSX.Element {
  return (
    <View style={styles.main}>
      <Text>메인입니다.</Text>
    </View>
  );
}

export default Main;

Main.tsx

 

import React from 'react';
import {Text, View} from 'react-native';
import styles from '../style/appStyles';

function Footer(): JSX.Element {
  return (
    <View style={styles.footer}>
      <Text>푸터입니다.</Text>
    </View>
  );
}

export default Footer;

Footer.tsx

 

그럼 이제 이 component들을 App.tsx에 옮겨주자.

 

import React from 'react';
import {StatusBar} from 'react-native';
import Header from './component/Header';
import Main from './component/Main';
import Footer from './component/Footer';

function App(): JSX.Element {
  return (
    <>
      <StatusBar hidden />
      <Header />
      <Main />
      <Footer />
    </>
  );
}

export default App;

정말 단순해지지않았는가?

 

실제로 잘 돌아가고있는지 확인해본다.

 

 

잘 나오는걸 확인 할 수 있다.

 

이제 분리하는 법을 배웠으니 다음 글에서는 헤더부분과 메인부분에 어떤 데이터를 넣을거고, 어떻게 표현해줄지 고민해보자.