[React Native] ECMAScript 6 (ES6)

[React Native] ECMAScript 6 (ES6)

2022. 1. 6. 15:32ㆍReact Native/Basic

1. var, let, const

javascript에서는 var 하나면 유연한 방식으로 변수를 선언할 수 있어 편하지만 문제점이 있다. var 문제점 해결을 위해 ES6에서 let, const 가 새로 등장했다.

var의 문제점

1. function 단위의 scope

var hello = 'world';

function test() {
  var hello = 'korea';
  console.log(hello); // korea
}

test();

console.log(hello); // world

var hello = 'world';

if (true) {
  var hello = 'korea';
  console.log(hello); // korea
}

console.log(hello); // korea

2. 변수 재정의 가능

var hello = 'world';
var hello = 'korea';

console.log(hello); // korea

재정의가 가능하면 변수가 덮어씌워지면서 혼란스러운 상황이 찾아올 수 있다.

let hello = 'world';
let hello = 'korea';

console.log(hello); // 오류 발생

let hello = 'world';

if (true) {
  let hello = 'korea';
  console.log(hello); // korea
}

console.log(hello); // world

let은 변수를 선언한 블록에서 유효하여 var 보다는 let 의 사용이 권장된다.

const는 let과 유사하지만 변하지 않는 값이다. 블록 스코프라는 점에서 let과 동일하지만 변수에 재할당이 불가능하다.

const num = 5;

num = 6;

console.log(num); // 에러 발생

const hello = 'world';

if (true) {
  const hello = 'korea';
  console.log(hello); // korea
}

console.log(hello); // world

하지만 const의 값은 변경이 불가능하지만 객체나 배열의 요소는 수정이 가능하다.

// object
const drinks = {};
drinks.caffe = 'latte';
drinks.lemon = 'ade';

console.log(drinks); // { caffe: 'latte', lemon: 'ade'}

// array
const arr = [1,2,3,4,5];
arr[0] = 100;
arr[4] = 500;

console.log(arr); // [ 100, 2, 3, 4, 500 ]

2. String Literal

const val01 = 'Hello';
const val02 = 'World';
const val03 = val01 + ' ' + val02 + '!!!';

console.log(val03); // Hello World!!!


const litVal = `${val01} ${val02}!!!`

console.log(litVal); // Hello World!!!

변수가 많아지면 변수와 따옴표의 나열이 귀찮을 수 있는데 이를 보완하기 위해 String Literal 이 등장했다.

'' 가 아니라 ``로 열고 닫아준다.

`${variable}`

변수가 많아지면 더 편리해진다.

3. for ... of 반복문

기존의 for ... in 반복문은 value 값이 아닌 key 값으로만 접근 가능

let array = [10,20,30,40];

for (let val in array) {
  console.log(val); // 0 1 2 3
  console.log(array[val]); // 10 20 30 40
}

ES6에서 제공하는 for ... of 반복문은 value 값에 대해서 사용 가능하다.

let array = [10,20,30,40];

for (let val of array) {
  console.log(val); // 10 20 30 40
}

하지만 for ... of 반복문은 모든 객체를 상대로 사용가능한 것이 아니라 Symbol.iterator 속성을 가지는 컬렉션을 상대로만 사용 가능하다.

즉, value 값이 생기면 key 값이 자동으로 생기는 배열같은 객체여야만 한다.

iterator 객체를 반환하지 않는 객체는 for ... of 반복문 사용이 불가능하다.

let obj = {
  a: 1,
  b: 2,
  c: 3
}

for (let val of obj) {
  console.log(val); // 에러 발생
}

for (let val in obj) {
  console.log(val); // a b c
}

위와 같은 경우는 for ... in 반복문으로 사용하면 된다.

객체 특성에 따라 원하는 동작을 하는 반복문 사용하면 된다.

4. Rest Operator

function printNums(num1, num2) {
  console.log(num1, num2);
}

printNums(1,2,3,4,5); // 1 2

function printNums(num1, num2) {
  console.log(arguments);
}

printNums(1,2,3,4,5); // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

Rest Operator

function printNums(num1, ...num2) {
  console.log(arguments);
}

printNums(1,2,3,4,5); // 1 [ 2, 3, 4, 5 ]

Rest Operator는 함수의 마지막 parameter 앞에 ... 을 붙여 함수에 전달된 나머지 인자를 배열로 대체해준다.

5. Spread Operator

함수 호출

함수를 호출할 때 인수로 사용할 수도 있고, 배열 안이나 객체 안에 들어갈 수도 있다.

function sum (x, y, z) {
  return x+y+z;
}

console.log(sum(1,2,3)); // 6

let arr = [10, 20, 30];
console.log(sum(arr)); // 10,20,30undefinedundefinedundefined

배열의 인자를 함수의 인수로 사용하기 위해서는 apply를 사용한다.

let arr = [10, 20, 30];
console.log(sum.apply(null, arr)); // 60

Spread Operator 사용

let arr = [10, 20, 30];
console.log(sum.(...arr)); // 60

Spread Opeartor는 Rest Operator와 달리 함수를 호출할 때 쓰기 때문에 중간에 끼여있어도 괜찮다.

let arr = [20, 30];

console.log(
  sum(10, ...arr, 40, 50) // 150
)

let face = ['eyes', 'nose', 'mouth'];
let head = ['hair', ...face, 'ears'];

console.log(head); // [ 'hair', 'eyes', 'nose', 'mouth', 'ears' ]

face 가 가진 엘리먼트를 head가 가질 수 있게 도와주는 것이 Spread Operator

배열 복사

let arr = [1, 2, 3];
let arrCpy = [...arr];

console.log(arrCpy); // [ 1, 2, 3 ]

let arr = [1, 2, 3];
let arrCpy = arr;

console.log(arrCpy); // [ 1, 2, 3 ]

단순히 assign 해서 넣어줘도 복사가 되지만 original 배열이 복사된 배열에 의해 영향을 받을 수 있다.

let arr = [1, 2, 3];
let arrCpy = arr;
arrCpy.push(4);

console.log(arr); // [ 1, 2, 3, 4 ]
console.log(arrCpy); // [ 1, 2, 3, 4 ]

original 배열에 값을 넣어주지 않았는데도 4가 추가되었다.

하지만 Spread Operator를 사용하면 original 배열이 복사된 배열에 의해 영향을 받지 않는다.

let arr = [1, 2, 3];
let arrCpy = [...arr];
arrCpy.push(4);

console.log(arr); // [ 1, 2, 3 ]
console.log(arrCpy); // [ 1, 2, 3, 4 ]

객체

let drinks = {
  caffe: 'latte',
  coca: 'cola'
}

let newDrinks = {
  lemon: 'tea',
  orange: 'juice',
  ...drinks
}

console.log(newDrinks) // {lemon: 'tea', orange: 'juice', caffe: 'latte', coca: 'cola' }

rn 에서 많이 쓰일 예정이라 잘 익혀두면 좋다.

6. Arrow Function

표현식의 결과값을 반환하는 표현식 본문

let arr = [1, 2, 3, 4, 5];

let twice = arr.map(v=>v*2);

console.log(twice); // [ 2, 4, 6, 8, 10 ]

표현식의 결과를 리턴해주는 본문 내에서 사용.

map : JS에서 지원하는 배열 객체 내장 함수. input이 parameter로 전달되는 함수, output이 새로운 배열이다.

map이 배열 객체 내장 함수라 map을 호출한 배열의 각 요소가 input 함수에 의해 새로운 배열로 리턴되어 함수가 들어갔는데 배열이 리턴된다.

let arr = [1, 2, 3, 4, 5];

let twice = arr.map(function(val){
  return val*2;
});

console.log(twice); // [ 2, 4, 6, 8, 10 ]

arrow function을 쓰면 코드를 간단히 쓸 수 있다.

상태블록 본문에 쓰이는 경우

상태블록 본문 : 상태를 결정 짓는 본문

let arr = [1, 2, 3, 4, 5];

let twice = arr.map(v=>{
  if (v % 2 == 0) {
    console.log('even number')
  } else {
    console.log('odd number')
  }
});

console.log(twice);
/* 
   odd number 
   even number 
   odd number 
   even number 
   odd number
   [ undefined, undefined, undefined, undefined, undefined ] 
*/

상태 블록 본문에 쓰인 예제.

let arr = [10, 20, 30, 40, 50];

let twice = arr.map((v, i)=>{
  console.log(`i: ${i}, v: ${v}`)
});

console.log(twice);
/* 
   i: 0, v: 10
   i: 1, v: 20
   i: 2, v: 30
   i: 3, v: 40
   i: 4, v: 50
   [ undefined, undefined, undefined, undefined, undefined ] 
*/

i : index

map은 parameter로 전달되는 함수를 인자로 받는데 그 함수의 2번째 인자가 배열의 index 값이다.

7. Class

JS 에서의 class 는 함수처럼 사용된다.

constructor는 클래스 인스턴스를 생성하고 초기화하는 역할을 한다.

인스턴스란 클래스를 구성하기 위한 껍데기.

class Person {
   constructor(region_, gender_) {
     this.region = region_;
     this.gender = gender_;
   }
   
   greetings(val = 'an-nyeong') {
     console.log(val);
   }
}

let korean = new Person('Korea', 'male')
console.log(korean); // Person { region: 'Korea', gender: 'male' }

korean.gender = 'female';
console.log(korean); // Person { region: 'Korea', gender: 'female' }

korean.greetings(); // an-nyeong

new 연산자를 이용해 korean이라는 클래스 객체를 만들었다. Person이라는 클래스의 형태를 띄기 위해서는 region_ 과 gender_ 라는 property가 있어야 하고 greetings 라는 함수도 있어야 한다. 그런데 region_, gender_ 라는 프로퍼티는 있는데 값은 없다. 이 값을 'korea', 'male'이 초기값으로 채워지게 된다.

즉, new 연산자가 constructor를 호출하면서 파라미터를 전달해주고 초기값으로 세팅해준다.

상속

class American extends Person {
   constructor(region_, gender_, language_) {
     super(region_, gender_);
     this.language = language_;
   }
   
   greetings(val = 'hello') {
     console.log(val);
   }
}

let american = new American('USA', 'female', 'English')
console.log(american); // American { region: 'USA', gender: 'female', language: 'English' }

american.greetings(); // hello

extends로 상속한다.

super를 사용하면 부모 클래스에 있는 초기화 룰을 따르게 된다. 그럼 상속받은 자식 클래스에서 추가한 프로퍼티에 대해서만 초기화가 필요하다.

결과를 보면 자식클래스에서 부모클래스의 룰을 따르고 자식클래스에서 추가한 내용도 반영된다.

greetings 함수의 경우, 오버라이드 된다. 부모 클래스와 자식 클래스에 같은 이름의 메소드가 존재하면 부모클래스의 메소드는 호출되지 않는다.

class Person {
   constructor(region_, gender_) {
     this.region = region_;
     this.gender = gender_;
   }
   
   greetings(val = 'an-nyeong') {
     console.log(val);
   }
}

let korean = new Person('Korea', 'male')
console.log(korean); // Person { region: 'Korea', gender: 'male' }

korean.gender = 'female';
console.log(korean); // Person { region: 'Korea', gender: 'female' }

korean.greetings(); // an-nyeong


class American extends Person {
   constructor(region_, gender_, language_) {
     super(region_, gender_);
     this.language = language_;
   }
   
   greetings(val = 'hello') {
     console.log(val);
   }
}

let american = new American('USA', 'female', English)
console.log(american); // American { region: 'USA', gender: 'female', language: 'English' }

american.greetings(); // hello

참고자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다

www.inflearn.com

'React Native > Basic' 카테고리의 다른 글

[React Native] React Native Component - 2. View, Text (0)	2022.01.12
[React Native] React Native Component - 1. Intro (0)	2022.01.11
[React Native] React (0)	2022.01.08
[React Native] error/solution (0)	2022.01.05
[React Native] React Native 소개 및 개발 환경 구축 (0)	2021.12.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코딩기록

코딩기록

태그

최근글

댓글

공지사항

아카이브