리액트 네이티브 #3_ 프로젝트 시작하기 & FlexBox

안녕하세요. 문범우입니다.

우리가 지금까지 두 차례의 포스팅에 거쳐서, 리액트 네이티브 개발 환경을 구성하는 방법과 리액트 네이티브에서의 아주 기본적인 내용에 대해서 알아보았습니다.

이번 포스팅부터는 실제로 프로젝트를 시작하여 코드를 작성해도록 하겠습니다.

---

1. 프로젝트 시작하기

먼저 우리는 첫번째 포스팅에서 Expo 를 설치하였습니다.

설치한 Expo를 실행합니다.

위와 같은 기본 화면에서 Create new project를 누릅니다.

위와 같이 둘 중 하나를 고르는 화면과 함께 프로젝트 이름 및 경로를 설정할 수 있는 창이 나옵니다.

일단 우리는 Blank를 선택하여 진행합니다.

Tab Navigation은 추후에 다뤄보도록 하겠습니다.

그리고 적절한 프로젝트 이름과 경로를 설정하여 Create를 누릅니다.

그럼 이제 Expo가 알아서 리액트 네이티브 환경을 가지는 프로젝트를 만들어 줍니다.

프로젝트를 만드는데에는 약간의 시간이 소요되니 잠시 기다리시면 됩니다.

프로젝트가 만들어진 뒤에 위와 같은 창이 뜨면 좌측 창에 아래와 같은 문구가 뜰때까지 대기합니다.

맨 아래에 써진 문구 처럼 이제 우리는 해당 프로젝트를 Device에서 실행시키거나 share를 할 수 있습니다.

일단 실제 핸드폰을 사용하기보다, 우리가 첫번째 포스팅에서 설치했던 시뮬레이터를 사용해보도록 하겠습니다.

저는 iOS를 기본으로 진행하지만, 안드로이드분들께서는 안드로이드 스튜디오를 통해 에뮬레이터를 켜주시면 됩니다.

iOS분들께서는 따로 시뮬레이터를 킬 필요없이 따라오시면 됩니다.

우측상단의 Device 버튼을 눌러서 자신이 키고자 하는 운영체제를 맞게 클릭하시면 됩니다. (안드로이드 분들께서는 스튜디오를 통해 에뮬레이터를 켜놔야 합니다.)

그럼 위와 같이 시뮬레이터가 켜지면서 좌측 창에 무언가 다시 진행되고 있는 것을 보실 수 있습니다. 우리의 프로젝트를 시뮬레이터에 빌드하고 있는 정도의 작업이니, 약간 기다리시면 됩니다.

기다리다 보면, 빌드가 끝나고 시뮬레이터가 아래와 같은 화면을 띄웁니다.

너무나 간편하지 않나요?

단순히 몇번의 클릭만으로 이렇게 프로젝트를 시작하였습니다!

2. 프로젝트 다루기

그럼 이제 실제로 코드를 짜보면서 놀아보도록 하죠!

먼저 자신이 선호하는, 사용하는 텍스트 에디터를 켜서 프로젝트를 만든 경로를 열어봅니다.

저는 위와 같이 VS코드를 이용합니다.

우리가 만든 프로젝트이름의 폴더 안에 App.js 라는 파일이 있습니다.

해당 파일을 열어보도록 하겠습니다.

기본적인 어플이 코드가 작성되어 있습니다.

가운데에 Text태그로 묶인 곳에는 우리가 아까 시뮬레이터에서 봤던 문구가 적혀있네요.

그럼 해당 문구를 약간 바꿔보도록 하겠습니다.

위와 같이 코드를 수정하고 저장을 해보고, 시뮬레이터를 확인해보면!

위와 같이 바로 반영이 된 모습을 볼 수 있습니다.

너무 편리하지 않나요?

이렇게 Expo를 사용하면, 우리가 코드를 수정하고 저장했을 때 이를 인지하여 바로 프로젝트를 다시 불러와줍니다.

이러한 기능을 Expo의 Live Reloading 이라고 합니다.

그런데, 이보다 더 멋있는 기능이 있습니다.

Live Reload는 우리가 프로젝트를 새롭게 저장했을 때, 프로젝트 전체를 시뮬레이터에 새로 불러오는 기능인데, 이와 달리 Hot Reload 기능은, 우리가 수정한, 또는 새롭게 추가한 코드만을 인지하여 그 부분만 새롭게 불러옵니다.

쉽게말해서 Live Reload 보다 빠르게 결과를 확인할 수 있게 되는 것입니다.

이러한 Hot Reload 기능을 사용하기 위해서는, 시뮬레이터 창을 클릭하고, 커맨드+D 를 눌러 아래와 같은 창을 띄우면 됩니다.

위와 같은 창에서, 먼저 Disable Live Reload 를 눌러 Live Reload 기능을 끄고, 다시 커맨드+D로 들어가서, Enable Hot Reloading 을 눌러서 실행시킵니다.

이제 정말로 프로젝트를 좀 더 신나게 다뤄볼 준비가 끝났습니다.!

3. FlexBox

첫 번째로 우리가 프로젝트에서 다뤄볼 내용은 FlexBox입니다.

CSS 등에서 Flex에 대해 배우신분들도 있겠지만 리액트 네이티브에서 사용되는 Flex는 약간 다릅니다.

물론, 개념적으로는 같지만 사용하는 속성이나 값에 있어서 차이가 존재하기 때문에 꼭 한번쯤은 공부해보시는 것이 좋고, 만약 내가 CSS 등을 공부한적이 없어서 Flex가 무엇인지 전혀 모른다는 분들께서는, 간단하게 구글에 검색하여 기본적인 개념정도만 알아보시면 좋을 것 같습니다.

그럼 Flex에 대한 최소의 개념이 있다는 전제하에, 리액트 네이티브에서 제공하는 Flex를 사용해보도록 하겠습니다.

먼저 아래 코드와 같이, 원래 있던 Text를 없애고 두개의 View 컴포넌트를 만들고, 각각 redBox, blackBox 스타일을 만들어서 지정해줍니다.

이때 각 박스의 flex는 1로 설정합니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redBox}/>
        <View style={styles.blackBox}/>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  redBox: {
    backgroundColor: 'red',
    flex: 1
  },
  blackBox: {
    backgroundColor: 'black',
    flex: 1
  }
});
 

이렇게 코드를 작성하고 저장하면 아래와 같이 화면이 변하게 됩니다.

화면에서 볼 수 있듯이, 빨간색 박스와 검은색 박스가 서로 1:1 비율로 화면을 차지하고 있는 것을 볼 수 있습니다.

이처럼 flex 속성에 int 값을 넣어줌으로써 화면에서 얼마만큼을 차지할지 비율적으로 설정할 수 있습니다.

예를 들어, 위의 상태에서 빨간색 화면의 flex를 6으로 설정하면 다음과 같습니다.

- flexDirection, justifyContent, alignItems

( https://facebook.github.io/react-native/docs/flexbox.html#docsNav )

우리가 flex와 관련되어 다뤄볼 속성은 위의 3가지 입니다.

아래의 링크는 공식문서이니 참고하시면 좋을 것 같습니다.

먼저 flexDirection은 말그대로 flex의 방향을 설정해줍니다.

우리가 위에서 두개의 박스로 테스트 해보면서 느낌이 오는 것과 같이, 리액트 네이티브에서 flexDirection의 기본 값을 column 입니다. 즉, 컴포넌트들을 기본적으로 세로로 배치합니다.

만약, 가로로 배치하고 싶다면 flexDirection을 row 로 설정해줍니다.

저는 빨간색 박스내부에 흰색박스와 노란색 박스를 가로로 만들어 보도록 하겠습니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.redBox}>
          <View style={styles.whiteBox}/>
          <View style={styles.yellowBox}/>
        </View>
        <View style={styles.blackBox}/>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  redBox: {
    backgroundColor: 'red',
    flex: 6,
    flexDirection: 'row',
  },
  blackBox: {
    backgroundColor: 'black',
    flex: 1
  },
  whiteBox: {
    backgroundColor: 'white',
    flex: 1
  },
  yellowBox: {
    backgroundColor: 'yellow',
    flex: 1
  }
});
 

위의 코드와 같이, 레드박스에 flexDirection을 row로 설정하고, 그 안에 화이트박스와 옐로우박스를 만들어서 넣었습니다.

그리고 결과는 아래와 같습니다.

그리고 justifyContent는 내부에 있는 컴포넌트들의 기본 축을 중심으로 위치를 잡아주는 것으로써, 아래와 같은 값들을 가질 수 있습니다.

값	설명
flex-start	flex의 축을 중심으로 처음부터 차례대로 요소를 배치합니다.
center	flex의 축을 중심으로 요소들을 가운데로 배치합니다.
flex-end	flex의 축을 중심으로 요소들을 맨 끝에 배치합니다.
space-around	화면 모서리를 포함한 요소들 서로의 간격을 동일하게 배치합니다.
space-between	화면 모서리를 제외한 요소들 서로의 간격을 동일하게 배치합니다.

실제로 화면에서 View컴포넌트를 만들고, 배경색을 달리해서 확인해보시면 좋을 것 같습니다.

마지막으로 alignItems는 기본 축과 직교되는 위치에 대해 설정하는 속성입니다.

이는 아래와 같은 값들을 가질 수 있습니다.

값	설명
flex-start	기본 축과 직교되는 축을 중심으로 처음부터 요소들을 배치합니다.
center	기본 축과 직교되는 축을 중심으로 가운데에 요소들을 배치합니다.
flex-end	기본 축과 직교되는 축을 중심으로 맨 끝에 요소들을 배치합니다.
stretch	기본 축과 직교되는 축을 중심으로 요소들을 늘어뜨립니다.

justifyContent와 alignItems 는 매우 비슷하지만, 현재 flexDirection을 어떻게 설정했냐에 따라서 서로 입장이 바뀌게 됩니다.

설명을 쓰다보니, 말이 좀 어렵게 되었는데 생각보다 어려운 개념이 아닙니다.

추후에 헷갈리지 않게 꼭 한번씩 값들을 넣어가며 테스트해보시길 바랍니다.