자바스크립트 실행 환경

자바스크립트 런타임

React Native를 사용할 때, 자바스크립트 코드는 최대 세 가지 환경에서 실행될 수 있다:

• 대부분의 경우, React Native는 Hermes를 사용한다. Hermes는 React Native에 최적화된 오픈소스 자바스크립트 엔진이다.
• Hermes가 비활성화된 경우, React Native는 JavaScriptCore를 사용한다. JavaScriptCore는 Safari의 자바스크립트 엔진이다. iOS에서는 앱 내에서 쓰기 가능한 실행 메모리가 없기 때문에 JavaScriptCore는 JIT를 사용하지 않는다.
• Chrome 디버깅을 사용할 때, 모든 자바스크립트 코드는 Chrome 자체 내에서 실행되며, WebSockets를 통해 네이티브 코드와 통신한다. Chrome은 V8을 자바스크립트 엔진으로 사용한다.

이러한 환경들은 매우 유사하지만, 일부 불일치가 발생할 수 있다. 따라서 특정 런타임의 세부 사항에 의존하지 않는 것이 좋다.

자바스크립트 구문 변환기

구문 변환기를 사용하면 모든 인터프리터에서 지원되기를 기다리지 않고도 새로운 자바스크립트 구문을 활용해 코드를 작성할 수 있다. 이를 통해 개발 과정이 더욱 즐거워진다.

React Native는 Babel 자바스크립트 컴파일러와 함께 제공된다. Babel이 지원하는 변환 기능에 대한 자세한 내용은 Babel 문서를 참고한다.

React Native에서 활성화된 변환 기능의 전체 목록은 @react-native/babel-preset에서 확인할 수 있다.

변환 기능	코드 예제
ECMAScript 5
예약어	promise.catch(function() {...});
ECMAScript 2015 (ES6)
화살표 함수	<C onPress={() => this.setState({pressed: true})} />
블록 스코프	let greeting = 'hi';
전개 연산자 호출	Math.max(...array);
클래스	class C extends React.Component {render() { return <View />; }}
계산된 속성	const key = 'abc'; const obj = {[key]: 10};
상수	const answer = 42;
비구조화 할당	const {isActive, style} = this.props;
for…of	for (var num of [1, 2, 3]) {...};
함수 이름	let number = x => x;
리터럴	const b = 0b11; const o = 0o7; const u = 'Hello\u{000A}\u{0009}!';
모듈	import React, {Component} from 'react';
객체 간결 메서드	const obj = {method() { return 10; }};
객체 축약 표기법	const name = 'vjeux'; const obj = {name};
매개변수	function test(x = 'hello', {a, b}, ...args) {}
나머지 매개변수	function(type, ...args) {};
단축 속성	const o = {a, b, c};
스틱키 정규식	const a = /o+/y;
템플릿 리터럴	const who = 'world'; const str = `Hello ${who}`;
유니코드 정규식	const string = 'foo💩bar'; const match = string.match(/foo(.)bar/u);
ECMAScript 2016 (ES7)
지수 연산자	let x = 10 ** 2;
ECMAScript 2017 (ES8)
비동기 함수	async function doStuffAsync() {const foo = await doOtherStuffAsync();};
함수 후행 쉼표	function f(a, b, c,) {};
ECMAScript 2018 (ES9)
객체 전개	const extended = {...obj, a: 10};
ECMAScript 2019 (ES10)
선택적 catch 바인딩	try {throw 0; } catch { doSomethingWhichDoesNotCareAboutTheValueThrown();}
ECMAScript 2020 (ES11)
동적 임포트	const package = await import('package'); package.function()
널 병합 연산자	const foo = object.foo ?? 'default';
옵셔널 체이닝	const name = obj.user?.name;
ECMAScript 2022 (ES13)
클래스 필드	class Bork {static a = 'foo'; static b; x = 'bar'; y;}
스테이지 1 제안
export default from	export v from 'mod';
기타
Babel 템플릿	template(`const %%importName%% = require(%%source%%);`);
Flow	function foo(x: ?number): string {};
ESM to CJS	export default 42;
JSX	<View style={{color: 'red'}} />
객체 할당	Object.assign(a, b);
React 디스플레이 이름	const bar = createReactClass({});
TypeScript	function foo(x: {hello: true, target: 'react native!'}): string {};

폴리필

모든 지원되는 JavaScript 런타임에서도 많은 표준 함수를 사용할 수 있다.

브라우저

• CommonJS require
• console.{log, warn, error, info, debug, trace, table, group, groupCollapsed, groupEnd}
• XMLHttpRequest, fetch
• {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame

ECMAScript 2015 (ES6)

• Array.from
• Array.prototype.{find, findIndex}
• Object.assign
• String.prototype.{startsWith, endsWith, repeat, includes}

ECMAScript 2016 (ES7)

• Array.prototype.includes

ECMAScript 2017 (ES8)

• Object.{entries, values}

• __DEV__