Skip to main content

자바스크립트 실행 환경

JavaScript 런타임​

React Native를 사용할 때 여러분의 JavaScript 코드는 최대 세 가지 환경에서 실행될 수 있다:

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

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

자바스크립트 구문 변환기​

구문 변환기를 사용하면 모든 인터프리터에서 지원될 때까지 기다리지 않고도 최신 자바스크립트 구문을 활용해 코드를 작성할 수 있다. 이를 통해 개발 경험을 더욱 즐겁게 만들 수 있다.

React Native는 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 런타임에서도 많은 표준 함수를 사용할 수 있다.

브라우저​

ECMAScript 2015 (ES6)​

ECMAScript 2016 (ES7)​

ECMAScript 2017 (ES8)​