TigerCow.Door

Github

https://github.com/doorBW/INSTA-by-react-native


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

오랜만에 리액트 네이티브에 대해 포스팅하게 되었습니다.

이전 포스트까지 해서 리액트 네이티브 환경구성하고, 기본적인 flex에 대해서 알아보았는데, 이후에 어떤 것을 하면서 연습하면 좋을지를 고민하느라 늦어지게 되었습니다.

그리고 결정을 내린건 인스타그램 UI를 만들어보기로 하였습니다.

저도 공부를 시작하고 있는 터라.. 처음부터 완벽하게 하지는 못하겠더라구요.

그래서 마침 유튜브에 좋은 강의가 올라와있길래 이를 참고하면서 포스팅을 진행해보도록 하겠습니다.


https://www.youtube.com/watch?v=cgg1HidN4mQ&t=5s


위의 링크를 들어가보시면 인스타그램 UI 따라하기 영상이 총 5편으로 제작되어 있습니다.

저는 해당 영상을 그대로 따라해보면서 정리하는 정도로 포스팅을 할 예정이에요.

영어가 상관없거나 영상으로 만나보고 싶으신 분들은 위의 영상을 추천드립니다 :)


먼저, 이번 포스팅에서는 아래의 내용정도까지 제작이 가능합니다.


- 인스타그램의 상단, 하단 네비게이션 구현 및 각 화면으로 넘어가기



1. 필요한 라이브러리 설치


먼저 우리가 인스타그램을 만들어보기 위해서 필요한 라이브러리 몇개를 설치해야 합니다.

첫번째로는 아이콘등의 UI를 위해 native base를 설치합니다.

VS code 또는 터미널에서 아래 명령어를 실행하여 설치합니다.


npm install native-base



native base는 리액트 네이티브를 위한 오픈소스 UI 컴포넌트를 제공해주는 라이브러리 입니다.

공식 사이트는 아래 링크를 통해 확인하실 수 있습니다.

https://nativebase.io/


다음으로 설치할 라이브러리는 react navigation 입니다.

이전과 같이 아래 명령어를 통해 설치합니다.


npm install react-navigation



react navigation은 이름에서도 알 수 있듯이 우리가 네비게이션을 사용하기 위해서 필요한 라이브러리 입니다.



이렇게 두개의 라이브러리 설치를 완료하셨으면 마지막으로 다음 명령어를 입력하여 dependency를 추가합니다.


npm install




2. Stack 네비게이션 추가하기


그럼 이제 실제로 네비게이션을 추가해보도록 하겠습니다.

먼저 Expo를 통해 프로젝트를 생성합니다.

프로젝트를 생성할때 '네비게이션이 없는' 빈 프로젝트로 생성합니다.



VS code를 통해 새로 생성한 프로젝트를 열면 위와 같이 기본코드만 작성되어 있습니다.


먼저, StackNavigator를 추가해보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// react-natvigation 라이브러리 에서 StackNavigator 추가하기
import { createStackNavigator } from 'react-navigation';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your!</Text>
      </View>
    );
  }
}
 
// StackNavigator 를 App에 추가하기
const AppStackNavigator = createStackNavigator({
  Main:{
    screen: MainScreen
  }
})
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
cs


먼저 사용을 위해 4번줄과 같이 react navigation에서 StackNavigator를 추가하였습니다.

그리고 16~21번째 줄과 같이 StackNavigator를 추가하여 MainScreen을 띄어주도록 하였습니다.


이렇게 코드를 작성하고 저장하여 시뮬레이터를 확인해보면 에러화면이 뜰텐데, 지금은 이게 정상입니다. 기본적으로 리액트 네이티브에서 App.js를 실행시켜주는데, 우리가 App.js에서 메인으로 MainScreen을 띄어주라고 했지만, 우리는 MainScreen이란 것을 만든적이 없기 때문입니다.


그럼 바로 MainScreen을 만들어 보도록 하겠습니다.


먼저, 이후 우리가 만들 화면들도 추가적으로 있기 때문에 이들을 보기좋게 관리하기 위해 현재 프로젝트의 폴더 안에 Components 라는 폴더를 만들고, Components 폴더 안에 MainScreen.js 를 만듭니다.



그리고 해당 MainScreen.js 파일에 기본적으로 아래와 같은 형태로 코드를 구현했습니다.

(영상에서는 user snippet을 설정하여 빠르게 작성하였는데 따로 snippet을 설정하지 않으신 분들은 그냥 그대로 코드를 작성해주시면 됩니다.)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-natvie';
 
class MainScreen extends Component{
    render(){
        return (
            <View style={style.container}>
                <Text>MainScreen</Text>
            </View>
        );
    }
}
export default MainScreen;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


이렇게 MainScreen.js 파일을 구성하셨으면, 다시 App.js로 돌아와서 방금 만들어준 MainScreen.js 를 import 합니다.

자신이 MainScreen.js를 만든 위치에 따라서 경로를 잡아줘야 합니다.

저는 현재 폴더안에 있는 Components 폴더 안에 만들었기에 다음과 같이 import를 하였습니다.


import MainScreen from './Components/MainScreen.js';


그리고 App.js의 본문내용을 우리가 만든, AppStackNavigator로 띄워줘야 합니다.

이를 수정한 App.js의 전체 코드는 아래와 같습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// react-natvigation 라이브러리 에서 StackNavigator 추가하기
import { createStackNavigator } from 'react-navigation';
// MainScreen 추가
import MainScreen from './Components/MainScreen';
 
export default class App extends React.Component {
  render() {
    return (
      <AppStackNavigator />
    );
  }
}
 
// StackNavigator 를 App에 추가하기
const AppStackNavigator = createStackNavigator({
  Main:{
    screen: MainScreen
  }
})
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
cs


위 코드 11번째 줄에서 AppStackNavigator를 보여주고 있는 것을 확인하세요.



3. 상단 네비게이션 추가하기


이제 우리가 인스타그램을 볼때 상단에 있는 네비게이션 바를 추가해보도록 하겠습니다.

상단바를 보시면 왼쪽에는 카메라, 가운데(제목)으로는 Instagram, 오른쪽에는종이비행기 아이콘이 있습니다.


이를 구현하기 위해서 MainScreen.js 에 들어가 네비게이션 옵션의 속성을 수정합니다.

물론, 아이콘을 사용하기 위해 우리가 설치했던 라이브러리를 import 해야합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
 
import { Icon } from 'native-base';
 
class MainScreen extends Component{
 
    static navigationOptions = {
        headerLeft: <Icon name='ios-camera-outline' style={{paddingLeft:10}}/>,
        title: 'Instagram',
        headerRight: <Icon name='ios-send-outline' style={{paddingRight:10}}/>,
    }
 
    render(){
        return (
            <View style={style.container}>
                <Text>MainScreen</Text>
            </View>
        );
    }
}
export default MainScreen;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


8번째 줄에서 아이콘을 사용하기 위한 native-base 라이브러리를 추가했습니다.

12번 ~ 16번 줄을 보시면 네비게이션 옵션에서 세개의 속성을 수정한것을 확인할 수 있습니다. padding 값은 아이콘이 화면 모서리에 너무 딱 붙지 않게 추가해준 스타일 입니다.



4. Tab 네비게이션 추가하기


이젠 인스타그램의 하단에 있는, 각 페이지로 이동하는 Tab 네비게이션을 추가해보도록 하겠습니다.


하단에 추가되는 네비게이션은 버튼을 누르면 그에 해당하는 위치로 이동되는 것으로써 일반적으로 TabNavigation이라고 합니다.

이를 이용하기 위해 react-navigation 라이브러리에서 TabNavigator를 추가합니다.

그리고 기본적인 TabNavigator를 구성합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
 
import { Icon } from 'native-base';
import { createTabNavigator } from 'react-navigation';
 
class MainScreen extends Component{
 
    static navigationOptions = {
        headerLeft: <Icon name='ios-camera-outline' style={{paddingLeft:10}}/>,
        title: 'Instagram',
        headerRight: <Icon name='ios-send-outline' style={{paddingRight:10}}/>,
    }
 
    render(){
        return (
            <View style={style.container}>
                <Text>MainScreen</Text>
            </View>
        );
    }
}
export default MainScreen;
 
const AppTabNavigator = createTabNavigator({
    HomeTab:{
        screen:HomeTab
    },
    Search:{
        screen:SearchTab
    },
    AddMedia:{
        screen:AddMediaTab
    },
    Likes:{
        screen:LikesTab
    },
    Profile:{
        screen:ProfileTab
    }
})
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


9번 줄에서 TabNavigator를 추가하였습니다.

그리고 29번 ~ 45번줄에 기본적인 TabNavigator를 구성하였습니다.

우리는 총 5개의 탭을 만들것이고 이에 해당하는 각각의 screen을 연결한 것입니다.

물론 이렇게 코드를 작성하고 시뮬레이터를 확인하면 오류가 납니다.

좀 전에 위에서 났던 오류와 같이 HomeTab을 찾을 수 없다는 등의 오류가 발생하는데 우리가 현재 HomeTab을 연결시켜놓고 HomeTab 화면을 만들지 않았기 때문입니다.


각각의 화면을 만들어주기 위해, 저는 Components 폴더 안에 AppTabNavigator라는 폴더를 새로 만들어서 5개의 파일을 다음과 같이 추가하였습니다.



그리고 각 파일에 대해 MainScreen.js 에서 기본 형태를 작성해주었던 것 처럼 코드를 작성합니다.

예시로 HomeTab.js 의 코드는 아래와 같습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
 
class HomeTab extends Component{
    render(){
        return (
            <View style={style.container}>
                <Text>HomeTab</Text>
            </View>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


그리고 MainScreen.js 에 5개의 js 파일을 아래 코드와 같이 import 합니다.


1
2
3
4
5
import HomeTab from './AppTabNavigator/HomeTab';
import SearchTab from './AppTabNavigator/SearchTab';
import AddMediaTab from './AppTabNavigator/AddMediaTab';
import LikesTab from './AppTabNavigator/LikesTab';
import ProfileTab from './AppTabNavigator/ProfileTab';
cs


이렇게 코드를 작성하고 시뮬레이터를 확인하면 이제 오류는 뜨지 않습니다.

하지만 노란색 경고창이 뜰텐데, 이는 현재 react-navigation에서 createTabNavigator를 더이상 사용하지 않기 때문입니다.

이 대신에 createBottomTabNavigator 등을 사용할 수 있으나, 뒤에서 진행되는 네비게이션의 속성들에서 약간의 차이가 존재합니다.

일단은 영상을 그대로 따라가기 위해 그대로 진행하도록 하겠습니다.

경고창은 한번클릭하여 Dismiss를 클릭해주시면 사라집니다.

이제 실제로 하단 Tab 네비게이션을 추가해보도록 하겠습니다.


MainScreen.js 의 render>return 부분에 있는 내용을 수정합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
 
import { Icon } from 'native-base';
import { createTabNavigator } from 'react-navigation';
 
import HomeTab from './AppTabNavigator/HomeTab';
import SearchTab from './AppTabNavigator/SearchTab';
import AddMediaTab from './AppTabNavigator/AddMediaTab';
import LikesTab from './AppTabNavigator/LikesTab';
import ProfileTab from './AppTabNavigator/ProfileTab';
 
class MainScreen extends Component{
 
    static navigationOptions = {
        headerLeft: <Icon name='ios-camera-outline' style={{paddingLeft:10}} />,
        title: 'Instagram',
        headerRight: <Icon name='ios-send-outline' style={{paddingRight:10}} />,
    }
 
    render() {
        return (
            <AppTabNavigator />
        );
    }
}
export default MainScreen;
 
const AppTabNavigator = createTabNavigator({
    HomeTab:{
        screen: HomeTab
    },
    Search:{
        screen: SearchTab
    },
    AddMedia:{
        screen: AddMediaTab
    },
    Likes:{
        screen: LikesTab
    },
    Profile:{
        screen: ProfileTab
    }
})
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


위의 코드가 현재 MainScreen.js 의 전체코드입니다. 27번 줄과 같이 AppTabNavigator를 추가합니다.



이렇게 하여 시뮬레이터에서 확인하면 오류가 발생합니다.

강의에서는 별다른 오류없이 제대로 화면이 뜨지만, 저는 하나의 네비게이터만 사용해야 한다는 등의 오류가 발생합니다.

알아보니 다른 사람들도 비슷한 오류를 겪고 있는 듯 한데 정확히 어떤 점이 잘못된 건지는 아직 잘 모르겠습니다 :'(

https://github.com/react-navigation/react-navigation/issues/4196


위의 링크에서 이에 대한 문제를 이야기 중인데, 일단 중간에 나와있는 것 처럼 임시방편으로 아예 해당 오류가 발생했을 때 무시하도록 하는 방법을 사용하였습니다.

무시해도 일단은 작동되기 때문에 임시방편으로 놓아두도록 하겠습니다.

방법은 다음과 같습니다.

프로젝트의 폴더에서, node_modules 폴더 내부의, react-navigation 폴더 내부의 src 폴더 내부로 들어갑니다. 그럼 createNavigationContainer.js 파일의 코드를 수정합니다.

아래 사진과 같이 약 200번줄에서 시작되는 곳에 내부를 주석처리합니다.


이렇게 주석처리를 하면 우리가 위에서 겪은 오류가 발생했을때 아무 처리도 안하고 넘어가게 하는 것이므로 무시하게 됩니다.




이렇게 까지 하고 시뮬레이터를 확인해보면 하단에 네비게이션이 생긴것을 확인할 수 있습니다. 하지만 인스타그램의 네비게이션은 아이콘도 있고, 좀 더 시각적으로 잘 표현되어있죠?


그럼, 이번 포스팅의 마지막으로 해당 네비게이션을 수정해보도록 하겠습니다.


각각의 Tab 페이지에서 navigationOptions에 아이콘을 먼저 추가해야 합니다.

아이콘을 사용하기 위해서 native-base 라이브러리를 추가하고, navigationOptions를 수정합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
import { Icon } from 'native-base';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <View style={style.container}>
                <Text>HomeTab</Text>
            </View>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


위의 코드는 HomeTab.js 의 전체 코드입니다. 

이제 위와 같이 나머지 Tab 페이지에도 아이콘을 추가합니다.

아이콘을 추가하는 코드는 모두 동일하며 아이콘의 name 만 서로 다릅니다.

SearchTab.js 에는 'ios-search' 아이콘,

AddMediaTab.js 에는 'ios-add-circle' 아이콘,

LikesTab.js 에는 'ios-heart' 아이콘,

ProfileTab.js 에는 'person' 아이콘으로 추가합니다.


그리고 MainScreen.js 로 돌아와서 createTabNavigator의 속성을 수정해보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Platform
    } from 'react-native';
 
import { Icon } from 'native-base';
import { createTabNavigator } from 'react-navigation';
 
import HomeTab from './AppTabNavigator/HomeTab';
import SearchTab from './AppTabNavigator/SearchTab';
import AddMediaTab from './AppTabNavigator/AddMediaTab';
import LikesTab from './AppTabNavigator/LikesTab';
import ProfileTab from './AppTabNavigator/ProfileTab';
 
class MainScreen extends Component{
 
    static navigationOptions = {
        headerLeft: <Icon name='ios-camera-outline' style={{paddingLeft:10}} />,
        title: 'Instagram',
        headerRight: <Icon name='ios-send-outline' style={{paddingRight:10}} />,
    }
 
    render() {
        return (
            <AppTabNavigator />
        );
    }
}
export default MainScreen;
 
const AppTabNavigator = createTabNavigator({
    HomeTab:{
        screen: HomeTab
    },
    Search:{
        screen: SearchTab
    },
    AddMedia:{
        screen: AddMediaTab
    },
    Likes:{
        screen: LikesTab
    },
    Profile:{
        screen: ProfileTab
    }
}, {
    animationEnabled: true,
    swipeEnabled: true,
    tabBarPosition: "bottom",
    tabBarOptions: {
        style: {
            ...Platform.select({
                android:{
                    backgroundColor:'white'
                }
            })
        },
        activeTintColor: '#000',
        inactiveTintColor: '#d1cece',
        showLabel: false,
        showIcon: true,
    }
})
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


MainScreen.js의 전체적인 코드는 위와 같습니다.

추가된 부분은 50번 ~ 66번의 코드입니다.

우리가 각 탭에 대한 Screen 지정을 하였고 그 뒤에서 추가적인 속성을 설정합니다.

전체적인 속성은 react-navigation 공식문서에서 확인하실 수 있습니다.

속성들의 이름을 보면 간단히 무엇을 하는지 이해할 수 있을 것이며, 추가적으로 54번에 추가된 속성, tabBarOptions 에서 style에 Platform 을 사용하기 위해 코드 상단에 react-native 에서 Platform 을 추가로 import 하신것을 확인하실 수 있습니다.

이는 안드로이드 환경에서 바탕색이 흰색으로 되게끔 설정한 속성입니다.


이렇게 네비게이션의 속성까지 수정하면 아래와 같은 화면이 나오게 됩니다.



이렇게 하여, 인스타그램 UI 무작정 따라하기 1편을 마무리하도록 하겠습니다.


오류가 발생하거나 추가적인 질문은 언제나 댓글 및 이메일 또는 공지사항을 통한 1:1 카카오톡을 이용해주세요 :)

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

  • 누노 2019.02.11 11:57  댓글주소  수정/삭제  댓글쓰기



    강좌 감사히 잘 보고 있습니다.

    위 예제를 따라하던 중 오류가 발생하는데요.

    App.jp 에 <AppStackNavigator/> 를 추가하면

    The navigation prop is missing for this navigator. In react-navigation3 you must set up your app container directly.

    라고 오류가 발생합니다.

    왜 그런걸까요..??

    • Favicon of https://doorbw.tistory.com BlogIcon Tigercow.Door 2019.02.11 12:01 신고  댓글주소  수정/삭제

      안녕하세요!
      제가 최근 리액트네이티브를 따로 다루고 있지 않아서 정확하게는 잘 모르겠습니다 ㅠㅠ
      다만, 최근 네비게이션 관련 라이브러리가 업데이크 되며 제가 올린 내용과 변동된 것들이 있다는 것으로 알고있습니다. 관련내용에 대해 최근 공식 문서를 살펴보시는 것이 제일 정확할것 같습니다.

  • Favicon of http://dotdotgod.github.io/blog/ BlogIcon DotDot 2019.04.30 11:39  댓글주소  수정/삭제  댓글쓰기

    createTabNavigator함수가 더이상 사용할 수 없게되어서 소개해주신 소스를 고쳤는데
    방금 얘기한 것과 관련해서 제가 사용했던 해결방법을 블로그에 포스팅하고 싶습니다.
    해결방법과 추가로 작업한 내용 그리고 타이거카우님의 글을 소개하고 싶은데 괜찮을 까요?


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

지난 포스팅에서 리액트 네이티브를 사용하기위해 기본적인 개발환경 구성을 진행하였습니다.

이번 포스팅에서는, 바로 개발을 진행하기전에 리액트 네이티브에 관한 기본적인 이론들을 간단히 살펴보도록 하겠습니다.


1. Component



위 코드는, 우리가 나중에 실제로 개발을 시작했을 때 처음에 세팅되는 코드입니다. 위의 코드를 통해 알 수 있는 점은 화면을 보여주는데 있어서 react나 기타 웹에서와 같이 div등과 같은 컴포넌트가 존재하지 않고, 특별하게 View, Text 와 같은 컴포넌트가 존재하는 것입니다.


다시말해, 우리는 react native에서 사용할 수 있는 컴포넌트들이 한정되어 있습니다.

컴포넌트들에 대해 더 자세한 내용은 아래의 react native 공식 홈페이지에서 확인할 수 있습니다.

https://facebook.github.io/react-native/


코드를 조금 더 자세히 확인해보면, 우리는 react native라는 것을 통해 Stylesheet, View, Text 라는 컴포넌트를 불러온 것을 알 수 있습니다.

이와 같이 리액트 네이티브에서 특정 컴포넌트를 사용하려면 이를 불러와서 사용해야 합니다.

이러한 리액트 네이티브의 컴포넌트는 각 모바일 환경에 맞춰서 자동적으로 변환됩니다.


즉, iOS같은 경우에는 object-c, 안드로이드같은 경우에는 java로 각각의 컴포넌트들이 네이티브하게 변환됩니다.

이러한 이유 때문에 우리는 이러한 컴포넌트들을 이용하는 것입니다.



2. style


그리고 14번 부터의 코드를 확인해보면 styles라는 객체를 만드는 것을 볼 수 있습니다. StyleSheet.create()에 대한 것은 추후에 배워볼 것인데, 무엇보다 주목되는 것은 flex가 적용되는 모습입니다.

우리가 이전에 iOS 모바일 앱을 개발하기 위해서 swift를 사용하거나, 안드로이드 모바일 앱을 만들기 위해서 안드로이드 스튜디오를 사용할 때 실제로 flex를 적용시키기 위해서는 매우 복잡해질 수 있습니다.


레이아웃을 잡기 위해 웹 등에서 매우 편하게 사용하는 flex를, 이제 리액트 네이티브를 통해 모바일 어플리케이션에서도 사용할 수 있게된 것입니다.


그리고 이렇게 우리가 설정한 스타일을 7번 줄에서 확인할 수 있듯이 매우 간단하게 적용시킬수 있습니다.


또한 아직은 직접 와닿지 않지만 추후에 직접 개발을 하다보면 리액트 네이티브가 매우 엄격하고, 까다롭다라는 점을 느낄 수 있습니다.

다시 말해서, 사소한 오타나 실수에 의해서도 오류가 발생하고 어플리케이션이 제대로 작동하지 않습니다.

우리가 웹프로그래밍을 할때는 사소한 오타 등은 단순히 적용되지 않을뿐이지 큰 오류를 발생시키지는 않았습니다.

하지만 리액트 네이티브에서는 매우 사소한 것들 또한 엄격하게 잡아내는데, 다르게 살펴봤을 때 오히려 이러한 것이 개발자들에게는 매우 편하게 작용될 수 있습니다.



이렇게 리액트 네이티브에 관해 매우 간단한 것들에 대해서 알아보았습니다.

실제로 레이아웃을 잡는 것은 모바일 어플리케이션에서 매우 중요한 일이기도 하기에 저희가 다음 포스팅부터는 실제로 개발을 시작하고, 먼저 Flexbox에 대해서 알아보도록 하겠습니다.

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요