REACT 2일차 (react ES6 문법-1)

REACT에 필요한 자바스크립트 ES6의 주요 문법에 대한 포스팅입니다.

 

템플릿 문자열

 

1. 기존 자바스크립트의 문자열 사용 방법

 

var string1= '치킨';

var string2= '먹고싶다';

var string3= string1+' '+string2; ->ㄱ

 

var product= {name:'뿌링클', price: '20000원'};

var message='치킨'+product.name+'의 가격은'+product.price+'입니다'; ->ㄴ

 

var multiline='치킨\n뇸!'; ->ㄷ

 

var value1=1;

var value2=2;

var boolvalue=false;

var operator1='곱하면 '+(value1*value2)+'입니다.'; ->ㄹ

var operator2='불리언 값은 '+(boolValue ? '참' : '거짓') + '입니다'; ->ㅁ

 

ㄱ. 병합 문자를 사용해 문자열과 문자열 연결

ㄴ. 문자열과 변수를 연결할 때도 병합 연산자 사용

ㄷ. 줄바꿈 시 \n을 문자열에 포함

ㄹ,ㅁ. 연산 결과를 괄호로 묶어 연산 구문 먼저 실행

 

기존의 javascript 문자열 사용 방법은 파이썬과 유사한 방식을 사용했다.

 

2. ES6의 문자열 사용 방법

 

var string1= '치킨';

var string2= '먹고싶다';

var string3= `${string1} ${string2}`; ->ㄱ

 

var product= {name:'뿌링클', price: '20000원'};

var message=`치킨 ${product.name}의 가격은 ${product.price} 입니다`; ->ㄴ

 

var multiline=`치킨

뇸!`; ->ㄷ

 

var value1=1;

var value2=2;

var boolvalue=false;

var operator1=`곱하면 ${value1 * value2} 입니다.`; ->ㄹ

var operator2=`불리언 값은 ${boolValue ? '참' : '거짓'} 입니다`; ->ㅁ

 

ㄱ,ㄴ-> 템플릿 문자열에 $를 사용하여 변수 포함

ㄷ-> 템플릿 문자열은 enter를 눌러 줄을 바꾸는 것도 허용

ㄹ,ㅁ-> 팀플릿 문자열에 $기호를 사용하여 연산을 포함시킬 수 있다.

 

------------------------------------------------------------------------

 

전개 연산자

 

1. 기존 자바스크립트의 배열 전개 연산자 사용 방법

 

var array1 = ['one', 'two'];

var array2 = ['three', 'four'];

var combined= [array1[0],array1[1],array2[0],array2[1]]; ->ㄱ

var combined= array1.concat(array2); ->ㄴ

var combined= [].concat(array1,array2); ->ㄷ

var first=array1[0];

var second=array1[1]; ->ㄹ

var third= array1[2] || 'empty'; ->ㅁ

fuction func(){

  var args= Array.prototype.slice.call(arguments); ->ㅂ

  var first= args[0];

  var others= args.slice(1,args.length); ->ㅅ

}

 

ㄱ-> 배열의 각 요소를 추출하여 새로운 배열 생성

ㄴ,ㄷ-> concat 함수를 사용하여 두 배열 합치기

ㄹ-> 인덱스로 배열 요소 추출

ㅁ-> || 연산자와 조합시 추출한 배열 요소가 없을때 기본값 지정

ㅂ-> 특수 변수를 사용해 함수 내 인자 항목들을 배열로 변환

(func(a,b,c)에서 args[0]은 a, args[1]은 b, args[2]는 c항목으로 각각 할당)

ㅅ-> 인덱스 범위에 해당하는 배열요소 추출 args.length가 전체 배열의 길이 이므로

인덱스 범위 1번(두번째 항목)부터 마지막 항목까지 추출

 

2. ES6의 배열 전개 연산자 사용 방법

 

var array1= ['one','two'];

var array2= ['three','four'];

const combined= [...array1, ...array2]; ->ㄱ

// combined=['one','two','three','four'];

const [ first ->ㄴ, second ->ㄷ, three='empty' ->ㄹ, ...others ->ㅁ ] =array1;

// first='one', second='two', three='empty', others=[]

// var wrongArr= ...array1; ->ㅂ

function func(...args ->ㅅ) {var [first, ...others]= args;}

 

ㄱ-> 두 배열을 전개 연산자로 합침

ㄴ,ㄷ-> array1의 각 위치에 있는 요소 추출

ㄹ-> 기본값과 함께 배열 요소 추출

ㅁ->ㄴ~ㄹ에서 추출하고 남은 요소 추출

ㅂ-> 전개 연산자를 배열 표현식 없이 사용한 잘못된 예제

ㅅ-> 함수 인자 배열을 args 변수에 할당

 

3. 객체 전개 연산자 사용방법

 

이 또한 ES6 에서는 코드를 간결하게 사용할 수 있다.

ex)var a={one:1,two:2}

    var b={three:3.four:4}

    var combined={

      ...a,

      ...b,

    }; ->ES6

    var combined={

      one:a.one,

      two:a.two,

      three:b.three,

      four:b.four

    }; -> 기존 방법

    var combined=Object.assign({},a,b);  ->기존 방법

 

------------------------------------------------------------------------

 

가변 변수와 불변 변수

 

ES6의 가변변수는 let 키워드를 사용하여 읽거나 수정할 수 있다.

ES6의 불변변수는 const 키워드를 사용하여 읽기만 가능하다. 수정시 에러가 발생한다.

let num=1;   <->   const num=1;

 

하지만 읽기만 가능한 불변 변수라 했지만 자바스크립트 내장함수를 사용하면 값을 변경할 수 있다.

ex) const arr2=[]; arr2.push(1); arr2.pop();

const 변수의 값을 바꾸는 것은 무결성 제약 조건에 위배되므로 가능한 무결성을 유지하는 것이 좋다.

 

------------------------------------------------------------------------

 

클래스

 

기존 자바스크립트는 클래스 표현식이 없어서 prototype으로 클래스를 표현했지만

ES6에서는 클래스를 정의하여 사용할 수 있다.

 

1.기존 자바스크립트의 클래스 표현

function Shape(x,y){

  this,name='Shape';

  this.move(x,y);

}

Shape.create=function(x,y){ return new Shape(x,y);};

Shape.prototype.move=function(x,y){

  this.x=x;

  this.y=y;

}

Shape.prototype.area=function(){

  return 0;

};

var s = new Shape(0,0);

s.area();

 

Shape 함수(생성자)애는 this.move에 함수를 정의하지 않았지만 prototype객체에 move()함수가

정의 되어 prototype 선언 이후 new 연산자로 Shape()함수를 호출하여 Shape 객체 s를 만든다.

그러면 s는 prototype 객체 안의 move()함수를 참조할 수 있다. 클래스의 상속은 prototype객체의 값을

객체 내장 함수를 사용햐 덮어 씌우는 방식을 사용하면 된다.

 

2.ES6의 클래스 사용 방법

class Shape{

  static create(x,y) { return new Shape(x,y); }

  name='Shape';  -> this.name과 동일

  constructor(x,y){

    this.move(x,y);

  }

  move(x,y){

    this.x=x;

    this.y=y;

  }

  area(){

    return 0;

  }

}

var s= new Shape(0,0);

s.area();

 

ES6는 extends 키워드를 사용해 Shape 클래스를 상속할 수 있다.

 

------------------------------------------------------------------------

 

화살표 함수

 

기존 자바스크립트의 경우 익명 함수를 다음과 같이 선언한다.

var add= function(first,second){

  return first+second;

};

 

아래와 같이 화살표를 사용하여 익명함수를 선언할 수 있다.

ES6의 경우 var add=(first,second)=> first+second;

 

------------------------------------------------------------------------

 

객체 확장 표현식과 구조 분해 할당

 

var x=0;

var y=1;

기존의 자바스크립트의 경우 아래와 같은 방식으로 객체를 만들었다.

var obj={x: x, y: y};

ES6의 경우 아래와 같이 키값을 생략해도 키의 이름으로 키값을 지정한다.

var obj={x,y};

 

구조분해 사용 방법의 경우 기존의 자바스크립트는 아래와 같은 방식으로 분해를 한다.

var list=[0,1];

var item1=list[0];

var item2=list[1];

var item3=list[2] || -1; -> list[2]가 비어있을 경우 -1

ES6의 경우 아래와 같은 방식을 사용한다.

var list=[0,1];

var[

  item1,

  item2.,

  item3 = -1,

]=list;

인덱스를 치환하는 법도 tmp를 사용할 필요가 없이 아래와 같은 방식으로 치환할 수 있다.

[item2,item1]=[item1,item2];

 

------------------------------------------------------------------------

 

라이브러리 의존성 관리

 

기존 자바스크립트의 라이브러리 의존성 관리 방법

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.in.js"></script>

<script src="./lib/math.js" language="javascript"></script>

위와 같은 방식으로 script를 사용하여 관리를 했다.

만약 관련된 두 js가 순서가 바뀔 경우 오류가 발생하기도 한다.

 

ES6의 경우 import구문을 사용하여 script엘리먼트 없이 연결된 파일 및 의존 파일을

모두 내려 받고 코드를 구동하도록 변경되었다.

import MyModule from './MyModule.js';

-> import구문을 사용해 지정된 파일의 기본으로 공유하는 모듈 부르기

import { ModuleName } from './MyModule.js';

-> 이름에 맞춰 모듈안의 특정 함수 및 변수 참조

import { ModuleName as RenamedModuleName } from './MyModule.js

-> 이름이 충돌할 경우 다른 이름으로 변경

export default new Func();

-> 현재 파일이 다른 파일에서 기본으로 참조하게 되는 항목 정의