ReactNative) ReactNative 취미 시작 (feat: Component, FlexBox)

어느 스키장에서

안녕하세요. 후르륵짭짭입니다.

최근에는 Javascript에 취미를 가지고 싶어서 ReactNative 강의를 통해서 공부를 하고 있습니다.

앞으로 Javascript는 너무 기본적인 언어라 생각하여

지금이라도 취미를 가져 나중에 제게 도움이 될 것 같아서 앱 개발자인 저에게 좀 더 친숙 할 수 있는 

React Native로 공부를 시작하게 됐습니다.

(요즘에는 나의 노동력으로 돈을 버는게 쫌 회의적이라서 ㅠ ㅠ.)

 

** React Native 시작하기 **

- Sample 프로젝트 생성 - 

설치를 원하는 디렉토리에 가서 sudo npm install -g expo-cli를 하면

react Native에서 개발할 수 있는 환경을 제공하는 expo를 설치하게 됩니다.

그런 다음 expo init <프로젝트명>을 작성하여 Smaple 프로젝트를 시작합니다.

이제 VSCode의 터미널을 통해서 프로젝트를 시작해주면 끝 납니다.

 

** 기본적인 Component ** 

ReactNative도 iOS 처럼 간단한 UIVIew라던지 UIText 등을 제공합니다.

iOS는 UIKit 또는 SwiftUI에 다 들어가 있는데, ReactNative는 react-native에서 하나씩 가져와야합니다.

import { StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList} from 'react-native';

요렇게 import {<가져올 컴포넌트>} from <모듈> 과 같은 형태로 가져오게 됩니다.

 

 - 일반적인 형태 - 

일반적으로 React와 동일한 방식입니다. 

반면 React는 DOM 형식인 <div> </div> 이런 것을 사용하지만 ReactNative는 따로 컴포넌트가 존재합니다.

function App() {
  return (
    <View style={styles.container}> 
      <View>
         <Text style={{margin: 20 , borderWidth : 3, borderColor: "red", padding: 20}}>
          Hello World
          </Text>
        <Button title='Click Me'/>
      </View>
      <Text style={styles.dummyText}>Hello World</Text>
    </View>
  );
}

 

 

위와 같이 View 컴포넌트 , Text 컴포넌트, Button 컴포넌트가 있습니다.

<View>는 iOS에서 UIView와 같은 역할을 합니다.  

이 <View>위에 각종 Component를 올려 놓는 형식 입니다. 

(즉 , Layout을 위해서 있는 것이다.)

그리고 꾸미기 위해서는 style이라는 변수에 JSON을 넣어주면 됩니다.

이때 StyleSheet라는 것이 사용 됩니다.

//이와 같이 StyleSheet안에 Property를 생성하고 Object 형태로 관리할 수 있다.
//SytleSheet를 사용하면 AutoCOmplete이 가능하다.
//그리고 기본 단위는 Pixel 이다. 참고로 padding은 내부에 element의 간격이다. margin은 외부의 간격이다.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  dummyText : {
    margin: 20 ,
    borderWidth : 3,
    borderColor: "blue",
    padding: 20
  }
});

이렇게 CSS와 비슷하지만 Native랑 또 짬뽕이 된 형태의 Style을 만들어 줘서 넣어주면 됩니다.

 

** FlexBox ** 

FlexBox는 ReactNative에서 ReactNative에서 View 정렬에 가장 중요한 이론이라고 한다.

기본적인 구성은 하단 View들을 아우를 수 있는 가장 최 상단 View가 있어야한다.

예를 들어서 아래 처럼 말이다.

export default function App() {
  return (
    <View style={{ padding: 50 , flexDirection: "column" , justifyContent:'space-around', alignItems:'stretch', width:"80%", height:200}}>
      <View
        style={{
          backgroundColor: 'red',
          justifyContent: 'center',
          flex:1,
          alignItems: 'center'
        }}
      >
        <Text>1</Text>
      </View>
      <View
        style={{
          backgroundColor: 'blue',
          flex:2,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text>2</Text>
      </View>
      <View
        style={{
          backgroundColor: 'green',
          flex:1,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text>3</Text>
      </View>
    </View>
  );
}

 

- FlexDirection -

이렇게 가장 상단 View에 flextDirection을 설정 해준다!

여기서 FlexDirection은 Row, Column이 존재하는데, View들의 배치를 의미한다.

Column(세로로 배치) : 

Row(가로로 배치) : 

둘의 차이는 딱 봐도 자식들의 배치를 의미한다.

 

 - Align Items -

이것은 자식의 정렬 배치를 설정하는 겁니다.

만약 Row라고 하면 자식들을 세로로 어떻게 정렬 배치 할거냐 입니다.

Column이라고 한다면 자식들을 가로로 어떻게 정렬 배치 할거냐 이구요.

flex-start, center, flex-end, stretch, baseline 총 5가지가 있습니다.

https://yuddomack.tistory.com/entry/5React-Native-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%94%94%EC%9E%90%EC%9D%B8-2%EB%B6%80-%EB%B0%B0%EC%B9%98Flex-Direction%EC%99%80-%EC%A0%95%EB%A0%ACjustify-content-align-items

위와 같은 경우는 row으로 되어 있어서 세로로 자식들을 정렬하는 것을 보여주는 겁니다.

 

 - JustifyContent - 

이것은 또 FlextDirection의 세부 배치 입니다.

배치가 3가지라서 헷갈리는데, 제가 이해한 방식은 배치 해야할 작업이 3가지라고 생각 했습니다.

FlexDirection이 가장 큰 틀에서의 배치

JustifyContent는 FlexDirection에 맞는 세부 배치

AlignItem은 FlexDirection과 반대방향의 가장 밑단의 배치 

라고 생각했는데,, (잘 맞을지는 ㅠㅠ)

JustifyContent는 이렇게 5가지는 제공합니다.

flex-start(default)	축의 방향대로 컴포넌트를 쌓는다.
flex-end	축의 역방향대로 컴포넌트를 쌓는다.
center	축의 가운데를 기준으로 쌓는다.
space-between	양끝정렬(양끝 공백x)
space-around	양끝정렬(양끝 공백o)

space-between은 양끝 정렬입니다.

space-around는 중간지점 정렬 입니다.

이렇게 이미지가 같은 크기 인데, space-around와 between의 차이는 존재합니다.

 

 - 하위 View에도 FlexBox 적용 - 

만약 빨강색 뷰를 FlexDirection을 Column으로 적용하고

justifyContent는 space-around alignItem을 flext-start로 하면 어떻게 될까요?

세로로 나열 될 거고 아이템은 세로에서 중간 지점에 있을 것이고 가로 배치는 맨 왼쪽이겠네요.

이렇게 하위 뷰에도 FlexBox가 적용이 가능합니다.

 

 - Flex - 

Flex는 전체 뷰에서 비율로 나눠서 해당 Flex에 맞게 공간을 마련해주는 방식입니다.

export default function App() {
  return (
    <View style={{ padding: 50 , flexDirection: "row" , justifyContent:'space-around', alignItems:'stretch', width:"80%", height:200}}>
      <View
        style={{
          backgroundColor: 'red',
          justifyContent: 'center',
          flex:1,
          alignItems: 'center'
        }}
      >
        <Text>1</Text>
      </View>
      <View
        style={{
          backgroundColor: 'blue',
          flex:2,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text>2</Text>
      </View>
      <View
        style={{
          backgroundColor: 'green',
          flex:1,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text>3</Text>
      </View>
    </View>
  );
}

이렇게 뷰 세개가 존재하는데 총 Flex는 1 + 2 + 1 = 4개 이므로 총 4등분으로 나눠서

빨강은 한공간 파랑은 두 공간 초록은 한 공간을 주게 됩니다.

 

** 참고 사이트  **

FlexBox의 JustifyContent 정리 : 

https://daesiker.tistory.com/19

9.React-Native Layout(justifyContent, alignItems)

 

Error opening is simulator. Check Metro logs for details. :

https://november11tech.tistory.com/184

[React Native] Expo 에서 iOS 시뮬레이터 실행 시 오류 발생 해결 방법