개발환경
1. Xcode는 당연히 필수입니다.
2. node, watchman, flow를 설치합니다.
3. React Native 클라이언트 도구를 설치합니다.
4. 프로젝트를 생성합니다.
brew install node 필수. iojs로 대체 가능
brew install watchman 권장. 파일 변경 감시
brew install flow 선택. 정적 타입 체커
npm install -g react-native-cli
react-native init TidevProject
개발환경
프로젝트 폴더 및 파일 구성
TidevProject/
TidevProject.xcodeproj
TidevProjectTests/
iOS/
main.jsbundle
AppDelegate.h
AppDelegate.m
...
node_modules/
react-native/
...
index.ios.js
package.json
프로젝트 파일
iOS용 주요 파일
앱 JS 파일 번들
nodeJS 모듈
앱 시작 JS 파일
개발환경
5. react-native-icons, underscore 패키지를 설치합니다.
6. 패키지 서버를 실행합니다.
7. 작성된 패키지 파일은 웹을 통해 접근할 수 있습니다.
npm install react-native-icons underscore --save
npm start
open "http://localhost:8081/index.ios.bundle"
React Native의 특징
1. React와 같은 방식으로 컴포넌트를 만듭니다.
2. React 컴포넌트 특수 메소드와 속성도 그대로 동작합니다.
https://facebook.github.io/react/docs/component-specs.html 참고
3. NodeJS처럼 require를 통해 다른 모듈을 참조합니다.
var ComponentName = React.createClass({
render: function() {
return (
<View>
<Text>Hello, {name}</Text>
</View>
);
}
});
미리 정의된 네이티브 컴포넌트 사용
var React = require('react-native');
4. 일부 ES6, ES7 기능을 사용할 수 있습니다. (계속)
// Destructuring Assignment
var React = require('react-native');
var { View, Text } = React;
// var View = React.View, Text = React.Text; 와 같다.
// 클래스
class Component extends React.Component {
render() {
return <View />;
}
}
// 간편 메소드 선언
var Component = React.createClass({
render() {
return <View />;
}
});
컴포넌트 공통 처리를
직접 해야 해서 권장하지 않음
React Native의 특징
4. 일부 ES6, ES7 기능을 사용할 수 있습니다. (계속)
// Arrow function : 더 간결한 코드 + this 유지
/* (a, b) => this.method(a, b)
(function(a, b){ return this.method(a, b); }).bind(this)
arg => { this.method(arg) }
(function(arg){ this.method(arg); }).bind(this)
*/
var Component = React.createClass({
onSelect(event, switch) {
...
},
render() {
return <View onPress={(e) => this.onSelect(e,true)} />;
}
});
// 템플릿 문자열 (멀티라인도 가능)
var who = 'world';
var str = `Hello ${who}`;
React Native의 특징
4. 일부 ES6, ES7 기능을 사용할 수 있습니다.
https://facebook.github.io/react-native/docs/javascript-environment.html 참고
5. AppRegistry를 통해 시작 컴포넌트를 설정해야 합니다.
// Promise 객체
Promise.resolve(3)
.then(data => {
...
})
.catch(reason => {
console.log(reason);
});
var {AppRegistry} = require('react-native');
...
AppRegistry.registerComponent('Tidev', () => App);
React Native의 특징
6. 스타일은 객체처럼 만들고 프로퍼티로 전달합니다.
https://facebook.github.io/react-native/docs/style.html 참고
var styles = StylesSheet.create({
titleContainer: {
flex: 1,
flexDirection: 'row'
},
title: {
fontSize: 16,
color: 'white'
}
});
...
<View style={styles.titleContainer}>
<Text style={styles.title}>Hello</Text>
<Text>World</Text>
</View>
React Native의 특징
7. XMLHttpRequest, Fetch API를 통해 통신합니다.
https://facebook.github.io/react-native/docs/network.html 참고
fetch('https://site.com/path', options)
.then( response => response.text() )
.then( responseText => {
console.log(responseText);
})
.catch( error => {
console.warn(error);
});
React Native의 특징
회고
1. React를 알면 빠르게 만들 수 있다.
= 모르면 학습 시간이 필요하다.
2. Flexbox 레이아웃과 CSS 비슷한 스타일링은 편하다.
3. 아직 다소 불안정하다.
- 여전히 수정해야 할 버그가 많다.
- 다행히 상당히 빠르게 패치가 되고 있다.
- 크롬 디버거 연결에 안정성 좀... ㅠ_ㅠ
4. 네이티브를 아예 모르면 힘들다.
- 확장 기능을 사용하려해도 알아야 한다.
- Objective-C에 대한 눈치 정도라도 있어야 한다.
- 많이는 몰라도 된다.
오픈 소스로 공개되어 있습니다.
오늘 코드는
http://github.com/taggon/tidev