글보다 영상을 선호한다면? 영상 가이드를 참고하세요.

프로그래밍 언어 환경

React 앱 개발에 사용되는 프로그래밍 언어는 ECMAScript(JavaScript 표준 명칭)에 대해 살펴봅시다.

모던 JavaScript

React는 기본적으로 최신 ECMAScript 언어를 사용합니다. 그러므로 React 개발에 앞서 최신 ECMAScript (opens new window)를 학습해야 합니다.

• ES2015 (ES6) (opens new window)
• ES2016 (ES7) (opens new window)
• ES2017 (ES8) (opens new window)
• ES2018 (ES9) (opens new window)
• ES2019 (ES10) (opens new window)

ECMAScript 강의

모던 JavaScript (ES6+) (opens new window) 영상 강의를 통해 최신 JavaScript 문법을 공부해보세요! ES6 문법을 잘 모르면 React 공부가 더욱 어렵습니다. ㅜㅜ

← ES6를 잘 몰라 전체적으로 이해하기 어려웠다는 의견

JavaScript 트랜스포머

React는 최신 JavaScript 문법을 프로젝트에 바로 사용할 수 있도록 내부적으로 Babel (opens new window) 컴파일러를 사용합니다. Babel을 사용해 변환 가능한 목록은 Transform Plugins (opens new window) 문서를 참고해보세요.

자주 사용되는 ES 문법

React 프로그래밍에서 자주 사용되는 ES6+ 문법은 다음과 같습니다.

ES6

• 블록 영역 (opens new window) (let (opens new window), const (opens new window))
• 템플릿 리터럴 (opens new window)(또는 스트링 (opens new window)) (let tech = 'React Native'; `안녕! ${ tech }`)
• 화살표 함수와 this (opens new window) (() => { —— })
• 전개(spread) 문법 (opens new window) (todos = [newTodo, ...this.todos])
• 기본 매개변수 (opens new window) ((state={}) => { —— })
• 나머지 매개변수 (opens new window) ((style, ...args) => { —— })
• 클래스 문법 (opens new window) (class Calendar extends React.Component { —— }) | class (opens new window), class 식 (opens new window)
• 구조 분해 할당 (opens new window) (const { isActive, style } = this.props)
• for...of (이터레이터) (opens new window) (for(let item of iterator) { —— })
• 모듈 (opens new window) (import { View, Text } from 'react-native') | import (opens new window), export (opens new window)
• 계산된 속성 (opens new window) (let key = 'unigue'; const o = {[key]: 90123})
• 향상된 객체 표기법 (opens new window) (cont o = { props, method() { —— } })

ES8

• 후행 쉼표 (opens new window) ((a, b, c, ) => { —— })
• 비동기 함수 (opens new window) (async () => { await doAsync() })

Stage 3

- 객체 전개 연산자 (opens new window) (const extended_o = { ...o, visible: true })

Stage 1

• 체이닝 옵션 (opens new window) (let name = o.user?.name)

React 전용

• JSX (opens new window) (<View style={styles.container}> </View>)
• Flow (opens new window) (const square = (n: number): number => n * n) → TypeScript (opens new window)로 대체할 수 있음.

JavaScript 폴리필

Browser

• Console API (opens new window)
• CommonJS Require (opens new window)
• Fetch API (opens new window)
• Timers API (opens new window)
• Geolocation API (opens new window)

ES6

• Object.assign (opens new window)
• String.prototype. { startsWith (opens new window), endsWith (opens new window), repeat (opens new window), includes (opens new window) }
• Array.from (opens new window)
• Array.prototype. { find (opens new window), findIndex (opens new window) }

ES7

• Array.prototype. { includes (opens new window) }

ES8

• Object. { entries (opens new window), values (opens new window) }