TigerCow.Door


지난글

리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1)


Github

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


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

지난 포스팅에서는 인스타그램을 만들기 위해 기본적인 네비게이션 구성을 하고 각 화면으로 넘어가는 단계까지 진행하였습니다.


이번 포스팅에서는 메인화면에 피드를 추가해보는 과정을 진행해보도록 하겠습니다.

이번 포스팅을 통한 결과물은 다음과 같습니다.



1. CardComponent 추가하기.


먼저 각 피드가 될, 새로운 js 파일을 만듭니다.

저는 Components 폴더 내부에 CardComponent.js 라는 이름으로 파일을 만들었습니다.


그리고 CardComponent.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 CardCompnent extends Component{
    render(){
        return (
            <View style={style.container}>
                <Text>CardCompnent</Text>
            </View>
        );
    }
}
export default CardCompnent;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


이제 HomeTab 에서 해당 CardComponent를 불러와 피드처럼 수정해주어야 합니다. 실질적인 피드의 사진이나 기타 내용은 CardComponent.js 에서 작성해 줄테지만, 우리가 인스타그램에서 보면 하나의 피드만 존재하는게 아니잖아요?

즉, CardComponent.js 는 하나의 피드가 될 것이고, 여러개의 피드를 추가하는건 HomeTab.js 에서 진행하기 때문에, 각 피드의 형태를 HomeTab.js 에서 잡아주어야 합니다.


먼저 HomeTab.js 에서 아래 코드를 통해 CardComponent.js 를 불러옵니다.


import CardComponent from '../CardComponent';


그리고 HomeTab.js 의 본문 내용을 수정하여 CardComponet를 보여주도록 합니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
import { Icon, Container, Content } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <CardComponent/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


위의 코드가 현재까지 진행된 HomeTab.js 의 코드입니다.

먼저 9번 줄에서 CardComponent를 import 하였고, 추가적으로 native-base 라이브러리에서 Icon 뿐만 아니라, Container와 Content를 불러왔습니다.

그리고 21번 ~ 25번 줄을 보시면 기존에 있던 HomeTab의 내용을 없애고 Container > Content > CardComponent 형태로 작성하였습니다.

또한 Container 태그에 스타일을 지정해주었고, 32번줄에 작성되어 있는 container 스타일을 보면, 기존에 있던 것에서 flex를 남겨두고 지웠으며, 추가로 backgroundColor를 지정해 주었습니다.


이렇게 하여 시뮬레이터를 확인하면 HomeTab에서 CardComponent가 뜨는 것을 볼 수 있습니다.



2. CardComponent 수정하기


이제 CardComponent.js 로 들어와 수정해보도록 하겠습니다.

먼저, CardComponent에서 사용할 native-base의 요소를 몇가지 추가해보도록 하겠습니다.

우리가 사용할 요소들은 Card, CardItem, Thumnail, Body, Left, Right, Button, Icon 이므로 아래와 같은 코드로 추가합니다.


import { Card, CardItem, Thumnail, Body, Left, Right, Button, Icon} from 'native-base';


이제 각각의 요소들을 활용하여 CardComponent의 내용을 꾸며봅니다.

이전에 먼저 여러분의 프로젝트 폴더에 있는 assets 폴더 안에, 프로필사진으로 쓸 이미지 하나와, 피드 이미지로 사용할 사진 약 3개를 넣어두시면 편합니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
} from 'react-native';
 
import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base';
 
class CardCompnent extends Component{
    render(){
        return (
            <Card>
                <CardItem>
                    <Left>
                        <Thumbnail source={require('../assets/beomwoo.jpeg')} />
                        <Body>
                            <Text>Beomwoo</Text>
                            <Text note>2018년 5월 22일</Text>
                        </Body>
                    </Left>
                </CardItem>
            </Card>
        );
    }
}
export default CardCompnent;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


위의 CardComponents.js 의 코드를 보시면, 내부에 Card > CardItem > Left > Thumbnail, Body 가 있는 것을 볼 수 있습니다.

먼저 여기서 Thumbnail은 프로필 사진을 의미합니다. 해당 태그의 source 속성에 여러분들의 이미지를 추가시켜 주시면 되고, 해당 이미지는 인스타그램의 프로필처럼 동그라미 형태로 나오게 됩니다.

그리고 Body 내부에 적어준 Text 두개는 사용자 계정과 요일을 나타냅니다.


이제 피드의 상단부를 제작하였으니, 본문, 피드 이미지를 추가해야 합니다.

그러기 위해서 CardItem을 추가하여 코드를 작성합니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image
} from 'react-native';
 
import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base';
 
class CardCompnent extends Component{
    render(){
        return (
            <Card>
                <CardItem>
                    <Left>
                        <Thumbnail source={require('../assets/beomwoo.jpeg')} />
                        <Body>
                            <Text>Beomwoo</Text>
                            <Text note>2018년 5월 22일</Text>
                        </Body>
                    </Left>
                </CardItem>
                <CardItem>
                    <Image source={require('../assets/react_native.jpg')} style={{height:200, width:null, flex:1}}/>
                </CardItem>
            </Card>
        );
    }
}
export default CardCompnent;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


24번 ~ 26번 줄을 보시면 새로운 CardItem 을 추가하여 그 내부에 Image 태그를 통해 피드이미지가 될 사진을 추가하였습니다.

이때, Image 태그를 사용하기 위해 6번 줄과 같이 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
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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image
} from 'react-native';
 
import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base';
 
class CardCompnent extends Component{
    render(){
        return (
            <Card>
                <CardItem>
                    <Left>
                        <Thumbnail source={require('../assets/beomwoo.jpeg')} />
                        <Body>
                            <Text>Beomwoo</Text>
                            <Text note>2018년 5월 22일</Text>
                        </Body>
                    </Left>
                </CardItem>
                <CardItem>
                    <Image source={require('../assets/react_native.jpg')} style={{height:200, width:null, flex:1}}/>
                </CardItem>
                <CardItem style={{height:45}}>
                    <Left>
                        <Button transparent>
                            <Icon name='ios-heart-outline' style={{color:'black'}}/>
                        </Button>
                        <Button transparent>
                            <Icon name='ios-chatbubbles-outline' style={{color:'black'}}/>
                        </Button>
                        <Button transparent>
                            <Icon name='ios-send-outline' style={{color:'black'}}/>
                        </Button>
                    </Left>
                </CardItem>
                <CardItem style={{ height:40 }}>
                    <Text>좋아요 101개</Text>
                </CardItem>
                <CardItem>
                    <Text>
                        <Text style={{fontWeight:'900'}}>Beomwoo </Text>
                        #인스타그램 #따라하기 #리액트네이티브</Text>
                </CardItem>
            </Card>
        );
    }
}
export default CardCompnent;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


갑작스레 추가된 코드가 좀 길게 보일 수 있지만, 27번 ~ 47번까지, 3개의 CardItem을 추가시키며, 버튼을 포함한 CardItem, 좋아요 개수를 알려주는 CardItem, 본문내용을 보여주는 CardItem 을 추가했을 뿐입니다.

크게 어려운 내용은 아니니 따라오실 수 있을 겁니다. :)


이렇게까지 하고 시뮬레이터를 확인해보면, 



위와 같이 인스타그램의 하나의 피드처럼 완성이 되었습니다.


그런데, 각 피드마다 이미지나, 좋아요 개수는 같지 않습니다.

(물론 아이디나 날짜, 댓글도 서로 다르게 구현되어야 하지만 일단은 따라하기니까... 이미지와 좋아요 개수만 컨드롤 해보겠습니다.)

즉, 여러개의 피드를 추가할텐데, 이때 각각의 피드마다 이미지와 좋아요 개수가 다르게 설정될 수 있도록 코드를 수정해보도록 하겠습니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    Image
} from 'react-native';
 
import { Card, CardItem, Thumbnail, Body, Left, Right, Button, Icon } from 'native-base';
 
class CardCompnent extends Component{
    render(){
        const images = {
            '1': require('../assets/react_native.jpg'),
            '2': require('../assets/python.jpg'),
            '3': require('../assets/deep_learning.png')
        }
 
        return (
            <Card>
                <CardItem>
                    <Left>
                        <Thumbnail source={require('../assets/beomwoo.jpeg')} />
                        <Body>
                            <Text>Beomwoo</Text>
                            <Text note>2018년 5월 22일</Text>
                        </Body>
                    </Left>
                </CardItem>
                <CardItem>
                    {/* <Image source={require('../assets/react_native.jpg')} style={{height:200, width:null, flex:1}}/> */}
                    <Image source={images[this.props.imageSource]} style={{height:200, width:null, flex:1}}/>
                </CardItem>
                <CardItem style={{height:45}}>
                    <Left>
                        <Button transparent>
                            <Icon name='ios-heart-outline' style={{color:'black'}}/>
                        </Button>
                        <Button transparent>
                            <Icon name='ios-chatbubbles-outline' style={{color:'black'}}/>
                        </Button>
                        <Button transparent>
                            <Icon name='ios-send-outline' style={{color:'black'}}/>
                        </Button>
                    </Left>
                </CardItem>
                <CardItem style={{ height:40 }}>
                    {/* <Text>좋아요 101개</Text> */}
                    <Text>좋아요 {this.props.likes}개</Text>
                </CardItem>
                <CardItem>
                    <Text>
                        <Text style={{fontWeight:'900'}}>Beomwoo </Text>
                        #인스타그램 #따라하기 #리액트네이티브</Text>
                </CardItem>
            </Card>
        );
    }
}
export default CardCompnent;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
cs


위의 코드를 보시면, 31번줄을 32번 줄과 같이 수정했고, 48번줄을 49번 줄과 같이 수정하였습니다.

수정된 두줄의 코드 모두 어떤 이미지를 넣거나, 숫자를 넣는대신에 {this.props.~} 형태로 입력해주었습니다.

그리고 이미지는 13번 ~ 17번 줄에 집합형태로 추가시켜줌으로써 우리가 어떤 숫자를 넘겨주는지에 따라 이미지가 설정되도록 하였습니다.

이것은 우리가 HomeTab.js 에서 각 피드를 추가할때 ~에 쓰여진 이름으로 데이터를 전달해주면 그 값을 받는 곳을 지정해 준 것입니다.

즉, 우리가 HomeTab.js 에서 CardComponent 를 보여줄때 추가로 imageSource에 진짜 이미지의 경로를 적어주고, likes 에 좋아요의 개수를 적어주면 그 값이 전달되어 보여지게 됩니다.


그럼 HomeTab.js 로 돌아가서 총 3개의 피드를 추가해보도록 하겠습니다.


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
import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet
    } from 'react-native';
import { Icon, Container, Content } from 'native-base';
 
import CardComponent from '../CardComponent';
 
class HomeTab extends Component{
 
    static navigationOptions = {
        tabBarIcon: ({ tintColor }) => (
            < Icon name='ios-home' style={{color:tintColor}} />
        )
    }
 
    render(){
        return (
            <Container style = {style.container}>
                <Content>
                    <CardComponent imageSource='1' likes='2324'/>
                    <CardComponent imageSource='2' likes='46'/>
                    <CardComponent imageSource='3' likes='208'/>
                </Content>
            </Container>
        );
    }
}
export default HomeTab;
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    }
})
cs


위와 같이 HomeTab.js 에서 CardComponent 를 3개 추가하고 각각에 따라 설정값을 다르게 주었습니다.


이렇게까지 하면 다음과 같이 어느정도 인스타그램의 첫 화면이 완성되었습니다.



이렇게 하여 인스타그램 UI 따라하기 2번째 포스팅을 마무리 하겠습니다.


오류가 생기거나 추가적으로 궁금한 사항이 있으신 분들은 댓글 또는 공지사항을 통해 이메일이나 카카오톡으로 말씀해주세요 :)

블로그 이미지

Tigercow.Door

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


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

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

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


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로 설정합니다.


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
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
  }
});
 
cs


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



화면에서 볼 수 있듯이, 빨간색 박스와 검은색 박스가 서로 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 로 설정해줍니다.


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


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
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
  }
});
 
cs


위의 코드와 같이, 레드박스에 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을 어떻게 설정했냐에 따라서 서로 입장이 바뀌게 됩니다.


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

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


블로그 이미지

Tigercow.Door

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


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

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

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


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