React Native를 사용하면 두 가지 환경에서 Javascript 코드를 실행하게 됩니다.
- 대부분의 경우, React Native는 Safari를 지원하는 JavaScript 엔진인 JavaScriptCore를 사용합니다. iOS 에서 JavaScriptCore 는 쓰기 가능 / 실행 가능 메모리가 없기 때문에 JIT 를 사용하지 않습니다.
- 크롬 디버깅을 사용할 때, 모든 JavaScript 코드는 크롬 자체에서 실행되며, 웹소켓을 통해 네이티브 코드와 통신합니다. 크롬은 V8 을 JavaScript 엔진으로 사용합니다.
두 환경은 매우 유사하지만, 일부 불일치가 발생할 수 있습니다. 향후 다른 JavaScript 엔진으로 실험을 진행할 예정이므로, 특정 런타임에 의존하지 않는 것이 좋습니다.
Syntax transformers 를 사용하면 모든 인터프리터의 지원을 기다릴 필요 없이 새 JavaScript 구문을 사용할 수 있어 코드를 보다 즐겁게 작성할 수 있습니다.
React Native는 Babel JavaScript compiler 와 함께 제공됩니다. 자세한 내용은 지원되는 변환에 대한 Babel documentation을 참조하세요.
React Native의 활성화된 변환에 대한 전체 리스트는 metro-react-native-babel-preset 에서 찾아볼 수 있습니다.
ES5
- 예약된 단어 :
promise.catch(function() { });
ES6
- Arrow functions:
<C onPress={() => this.setState({pressed: true})} /> - Block scoping:
let greeting = 'hi'; - Call spread:
Math.max(...array); - Classes:
class C extends React.Component { render() { return <View />; } } - Constants:
const answer = 42; - Destructuring:
var {isActive, style} = this.props; - for...of:
for (var num of [1, 2, 3]) {}; - Modules:
import React, { Component } from 'react'; - Computed Properties:
var key = 'abc'; var obj = {[key]: 10}; - Object Concise Method:
var obj = { method() { return 10; } }; - Object Short Notation:
var name = 'vjeux'; var obj = { name }; - Rest Params:
function(type, **...args**) {}; - Template Literals:
var who = 'world'; var str =`Hello ${who}`;
ES8
- Function Trailing Comma:
function f(a, b, c,) {}; - Async Functions:
async function doStuffAsync() { const foo = await doOtherStuffAsync(); };
Stage 3
- Object Spread:
var extended = { ...obj, a: 10 }; - Static class fields:
class CustomDate { static epoch = new CustomDate(0); } - Optional Chaining:
var name = obj.user?.name;
Specific
- JSX:
<View style={{color: 'red'}} /> - Flow:
function foo(x: ?number): string {}; - TypeScript:
function foo(x: number | undefined): string {}; - Babel Template:
allows AST templating
JavaScript 런타임을 지원하는 모든 곳에서 많은 표준 함수가 사용 가능합니다.
Browser
- console.{log, warn, error, info, trace, table, group, groupEnd}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
ES6
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
- Array.from
- Array.prototype.{find, findIndex}
ES7
- Array.prototype.{includes}
ES8
Specific
__DEV__