0%

[React Native] TO-DO 앱 만들기 #1

이번 강좌에서는 리액트 네이티브(React Native)로 단순한 **할 일 관리앱(To-Do App)**을 만들어 봅니다.


* * *

expo-cli 설치

이전에는 create-react-native-app 도구를 사용해서 리액트 네이티브 프로젝트를 생성했다. 하지만, 지금은 expo-cli를 사용하여 프로젝트를 생성한다. 아래와 같이 expo-cli를 설치하자.

1
$ npm install -g expo-cli

Node v6 이상 버전이 설치되어 있어야 한다.


프로젝트 생성

expo init 를 사용하여 프로젝트를 생성한다.

1
2
3
$ expo init todo-app
$ cd todo-app/
$ npm start

npm start 명령은 Expo CLI 서버를 시작한다. 그리고 Expo 모바일 앱을 사용하면 개발 중인 앱을 스마트폰에서 테스트해 볼 수 있다.


앱 설계하기

오래전에 사용했던 무료 mock-up 서비스가 있었는데, 오랜만에 찾아보니 없어졌다. 그래서 앱인벤터를 이용하여 간단하게 화면 설계를 하였다.

기능은 매우 간단하다.

  • 텍스트 박스할 일을 입력하고 저장 버튼을 누르면 할 일 목록에 추가된다.
  • 체크 박스를 누르면 **할 일이 체크(완료)**된다.
  • 삭제 버튼을 클릭하면 할 일 목록에서 삭제된다.

화면은 한 개다. 그리고 화면에 3개의 컴포넌트가 있다. App 컴포넌트, Header 컴포넌트, Body 컴포넌트이다. 리액트는 보통 컴포넌트 단위로 각각 개발하여 조립하는 식으로 구현한다. 이렇게 하면 컴포넌트를 재활용하여 다른 화면을 구현하는데 사용할 수 있다.


컴포넌트 구현하기

이제 컴포넌트를 하나씩 구현해보자. 우선은 UI 만 구현한다. 기능은 다음 강좌에서 구현할 것이다. 그리고 소스 코드에 대한 자세한 설명은 생략한다. 기능을 구현할때는 소스 코드를 자세하게 설명할 것이다.

1
2
3
4
todo-app
├─ App.js
├─ Header.js
└─ Body.js

Header 컴포넌트

Header.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React, { Component } from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity } from 'react-native'
import { MaterialCommunityIcons } from '@expo/vector-icons';

class Header extends Component
render() {
return (
<View style={styles.container}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
placeholder='Enter new todo'
autoCorrect={ false
/>
<TouchableOpacity>
<MaterialCommunityIcons style={styles.addBtn} size={30} name='plus-circle' />
</TouchableOpacity>
</View>
</View>
)



const styles = StyleSheet.create({
container: {
marginLeft: 20,
marginRight: 20,
},
input: {
borderRadius: 10,
backgroundColor: "#FFF",
paddingLeft: 10,
paddingRight: 10,
height: 50,
alignItems: "center",
flexDirection: 'row',
justifyContent: 'space-between',
borderBottomColor: "#bbb",
borderBottomWidth: StyleSheet.hairlineWidth,
},
inputText: {
flex: 1,
},
addBtn: {
color: '#4169E1'

});

export default Header;

TouchableOpacity 컴포넌트는 터치하면 투명도가 증가한다. 그래서 버튼 대신 많이 사용된다.

Body 컴포넌트

Body.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
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
76
import React, { Component } from 'react';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

class Body extends Component
state = [

text: '할일1',
completed: false,
},

text: '할일2',
completed: true,
},

text: '할일3',
completed: false,
},
]

render() {
return (
<View style={styles.container}>

this.state.map(data => (
<View style={styles.todo}>
<View style={styles.todoText}>
<TouchableOpacity style={styles.todoCheckbox}>

data.completed
? <MaterialCommunityIcons size={20} name='checkbox-marked-circle-outline' />
: <MaterialCommunityIcons size={20} name='checkbox-blank-circle-outline' />

</TouchableOpacity>
<Text>{data.text}</Text>
</View>
<TouchableOpacity>
<MaterialCommunityIcons style={styles.todoDelBtn} size={30} name='delete-outline' />
</TouchableOpacity>
</View>
))

</View>
)



const styles = StyleSheet.create({
container: {
flex: 1,
marginVertical: 5,
marginHorizontal: 20,
padding: 10,
backgroundColor: "#FFF",
borderRadius: 10,
},
todo: {
flexDirection: 'row',
alignItems: "center",
justifyContent: 'space-between',
height: 50,
borderBottomColor: "#bbb",
borderBottomWidth: StyleSheet.hairlineWidth,
},
todoCheckbox: {
marginRight: 5,
},
todoText: {
flexDirection: 'row',
},
todoDelBtn: {
color: '#777'

});

export default Body;

data.completed 값(True/False)에 따라 할 일 목록의 체크박스 아이콘이 바뀐다.

App 컴포넌트

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
31
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Header from './Header'
import Body from './Body'

export default class App extends React.Component
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Todo App</Text>
<Header />
<Body />
</View>
);



const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
paddingTop: 50,
backgroundColor: "#EEE",
},
title: {
fontWeight: "800",
fontSize: 30,
marginLeft: 20,
marginBottom: 20,

});

App 컴포넌트에서는 Header 컴포넌트와 Body 컴포넌트를 보여준다.



이제 앱을 실행 해보자.

앱이 실행되면, 아래와 같은 화면이 나타나야 한다.


다음 강좌에서 할 일을 텍스트박스에 입력하고, 목록에 추가하는 기능을 구현할 것이다.


* * *

처음에 낯설고 어려웠던 리액트가 이제는 조금씩 익숙해지고 있습니다. 플러터로 모바일앱을 개발할때와 비교하면, 오류나 문제가 발생했을 때 플러터보다는 빨리 해결 할 수 있었습니다. 리액트 네이티브는 오류 내용을 구글 검색하면 해결 방법을 쉽게 찾을 수 있습니다.

여기까지 읽어주셔서 감사합니다.


Sponsored ( Powered by dclick )

dclick-imagead


Originally posted on http://steemit.com