[React Native] (expo) App.js

안녕하세요~~ 오늘부터는 본격적으로 개발을 시작해보겠습니다. expo를 이용한 개발의 가장 첫번째인 App.js파일에 대해서 알아보고 공부를 해보겠습니다. 그럼 더 자세히 알아보도록 하죠!

프로젝트 생성 & App.js

우선 expo를 이용하여 프로젝트를 하나 만들겠습니다.
"expo init projectName" 명령어를 이용하여 프로젝트를 생성하였습니다. 프로젝트 이름은 project1이라고 하죠.
잘 생성이 되었다면 이제 프로젝트 안의 코드를 수정해보겠습니다. 많은 코드 제작 툴이 있지만 가장 흔히 사용하는 Visual Studio code를 이용해서 개발을 해보죠.
Visual Studio code에서 App.js 파일을 열어본 화면입니다. App.js파일은 모바일 화면에 출력되는 제일 첫 번째의 화면을 나타냅니다. 즉, 앱이 실행됨과 동시에 App.js 파일이 실행이 되는 것이죠! 그럼 위에서 부터 코드를 살펴보겠습니다.

코드 살펴보기

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

여기 import 라고 한것은 모듈이나 라이브러리, 컴포넌트를 가져오는(import) 코드를 작성하는 것입니다. StatusBar는 상태바에 대한 라이브러리이고 'react'에서 제공하는 React를 import하는 이유는 밑에서 설명드리겠지만 바로 JSX를 사용하기 위해서 입니다. 자세한건 밑에서 설명을 하죠! 그리고 'react-native'에서 제공하는 StyleSheet, Text, View 컴포넌트를 사용하기위해 import를 해주었죠.

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

바로 이 부분이 위에서 잠깐 언급했던 JSX 부분입니다. JSX는 javaScript확장한 문법으로 우리가 모바일 화면에서 보는 모든 것을 제어하는 부분이라고 보셔도 될 것 같네요. 즉 UI를 담당하는거죠! JSX를 잘 살펴보시면 XML이나 HTML과 굉장히 비슷한 느낌을 가지고 있다고 생각을 하실 수 있습니다. <>와 </>로 이루어져있으며 각 컴포넌트를 열고 닫으며 안에 내용을 넣을 수 있게 구성이 되어있죠.

이러한 컴포넌트 태그 안에 해당 컴포넌트에 해당하는 다양한 속성들을 제어할 수 있습니다. 컴포넌트와 속성들은 React-Native 공식 홈페이지에 가보면 더 자세히 알 수 있습니다. 처음 View의 속성에는 style이 있습니다. 아래에서 스타일을 정의하면 이 View에 스타일을 적용하는 것입니다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

이곳이 바로 스타일을 정의해주는 곳입니다. 스타일에 대한 이름을 만들고 위의 JSX코드에 컴포넌트 속성으로 넣어주는 형식으로 되어있죠. 스타일에 대한 더 자세한 내용은 나중에 한번에 포스팅을 해보도록 하죠!

앱을 직접 실행

그렇다면 이제 앱을 직접 실행해보겠습니다. 저는 xcode에 ios 시뮬레이터가 있으므로 그걸로 실행을 해보죠. 실행하기 전 JSX의 내용을 조금 바꿔보겠습니다.

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Let's Go SONG!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Text의 내용을 수정하였습니다. 얼마전 도쿄 올림픽의 높이뛰기 선수로 나오신 우상혁 선수님의 시그니쳐 문장인 "Let's Go WOO!"를 조금 따와서 한번 지어봤네요ㅎㅎ 그럼 이제 실행을 해볼까요?
이렇게 npm start 명령어를 작성하면 자동으로 서버에 접속하게 되고 브라우저에서 페이지 하나가 열립니다.
여기서 로컬 서버에 대한것을 제어할 수 있습니다. 저희는 ios 시뮬레이터로 실행을 하것이므로 Run on iOS simulator를 눌러줍니다.

잠시 기다리면 컴퓨터가 조금 느려짐과 동시에 xcode가 자동으로 실행되고 시뮬레이터가 열립니다.
짜잔! 잘 열리고 잘 실행이 되었습니다. 뭔가 뿌듯하네요!!

오늘은 개발의 첫 시작인 App.js파일에 대해 공부를 해보았습니다. 이제 시작이 되었지만 계속 공부하면서 지금이 제일 설레는 순간이 아닐까 생각이 되네요. 다음 포스팅에는 본격적으로 개발에 도움이 되는 다양한 요소들을 공부해보겠습니다. 그럼 오늘 하루도 수고 많으셨습니다.