리액트 네이티브에 대한 짤막한 이야기

1. Building iOS App with
Eri Han
haneri1103@gmail.com

2. Warning Message
발표자료 내용은 어디까지나 개인적인
경험에 의한 의견일 수 있음을 사전
공지합니다.

3. 리액트 네이티브
짤막한 이야기

4. 리액트 모바일버전
Q. 리액트 네이티브은 뭔가요?
자바스크립트로 개발작업이 이루어진다
인터페이스는 네이티브 위젯으로 표시된다
친화적인 네이티브 UI제공해 준다
Q. 리액트 네이티브의 특징은?
컴포넌트를 간단하게 만들고 쉽게 조합해서 뷰를 손쉽게 만들 수 있는 기술
Q. 리액트 네이티브 적용사례
https://facebook.github.io/react-native/showcase.html
Facebook Group
ES5, ES6(2015) / ECMAScript
JSX(JavaScriptXML)
React.js
iOS (Objective-C)
리액트 네이티브에 관한 짤막한 이야기

5. 개발환경 구축
살짝 훑어보기

6. 1. Homebrew
2. Node.js
3. 일반적인 iOS/Android 앱개발 환경
4. React Native 클라이언트 도구(react-native-cli)
상세한 내용은
https://facebook.github.io/react-native/docs/getting-started.html
개발환경 구축 살짝 훓어보기
Atom Nuclide.io

7. 간단한 앱
만들어 보기

8. 간단한 앱 만들어 보기
1. Todo을 입력할 수 있다.
2. 추가 버튼을 탭하면 입력한 Todo을 추가된다.
3. 추가된 Todo내용은 리스트로 표시된다.
*Todo 내용을 Firebase에 저장하기

9. 간단한 앱 만들어 보기
1. 프로젝트 생성하기
$ react-native init TodoApp
$ cd TodoApp
2. 필요한 패키지 설치하기
$ npm install firebase –save
$ npm install react-native-vector-icons underscore –save
아이콘에 대해서는
https://github.com/oblador/react-native-vector-icons

10. 간단한 앱 만들어 보기
* 생성된 프로젝트 폴더안 살펴보기

11. 간단한 앱 만들어 보기
3. 리액트 네이티브 팩키지 실행하기
$ npm start
4. 생성된 프로젝트의 앱을 기동하기 (iOS)
$ react-native run-ios
또는
ios폴더 안에 있는 TodoApp.xcodeproj를 Xcode로 열어서
Run해서 기동하기

12. 간단한 앱 만들어 보기
* index.ios.js 살펴보기
import import React, {
AppRegistry,
Component,
StyleSheet,
...
} from 'react-native';
var React = require('react-native');
var {
AppRegistry,
Component,
StyleSheet,
...
} = React;
component class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
...
</View>
);
}
}
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
...
</View>
);
}
});
styles const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
...
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
...
});
register component AppRegistry.registerComponent('AwesomeProject', ()
=> AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', ()
=> AwesomeProject);
ES6 ES5

13. 간단한 앱 만들어 보기
• Component
• React vs React Native
• div >>> View
• span >>> Text
• li, ui >>> ListView
• Img >>> Image
• Native Component
• UITabBar -> TabBarIOS
• UINavigationController -> NavigatorIOS
• UITableView -> ListView
• Native binding(Objective-C)
• RCT_EXPORT_MODULE
• RCT_EXPORT_METHOD
ES5

14. 간단한 앱 만들어 보기
5. 컴포넌트로 레이아웃를 추가 및 조합하기
6. 스타일 지정해 주기
7. 데이터베이스 연결하기
8. 데이터관리 부분 추가
9. 이벤트 처리 추가