React ES6 (3) - 객체 확장 표현식, 구조 분해 할당, 라이브러리 의존성 관리

객체 확장 표현식

• 기존 자바스크립트의 객체 확장 표현식 :
  • 기존 자바스크립트에서 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당했음

    
        
    
          
          
          
          
        
    var a = 1;
    var b = 2;
    var obj = { x: x, y: y };  // ⓐ
    var key = 'key';
    var combine = {};
    combine['one' + key] = 'val';  // ⓑ
    var obj2 = {  // ⓒ
        x: x,
        A : function() { console.log('A'); },
        B : function() { return 0; }
    };​

    ┌ ⓐ : 키 이름과 키 값이 동일함
    ├ ⓑ : 연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성해야 함
    └ ⓒ : 객체에 함수를 추가할 때는 변수에 함수를 할당해야 함

 

• ES6의 객체 확장 표현식 :
  • 위의 코드를 아래와 같이 개선함

    
        
    
          
          
          
          
        
    var a = 1;
    var b = 2;
    var obj = { x, y };  // ⓐ
    var key = 'key';
    var combine = {
        ['one' + key]: 'val'  // ⓑ
    };
    var obj2 = {
        x,
        A() { console.log('A'); },  // ⓒ
        B() { return 0; }
    };​

    ┌ ⓐ : 객체의 변수를 선언할 때 키값을 생략하면 자동으로 키의 이름으로 키값을 지정함
    ├ ⓑ : 객체 생성 블록 안에 대괄호를 사용하여 표현식을 작성하면 추가하여 계산된 키값을 생성할 수 있음
    └ ⓒ : function 키워드를 생략하여 함수를 선언할 수 있음
    
    

---

구조 분해 할당

• 기존 자바스크립트의 구조 분해 :

  
      
  
        
        
        
        
      
  var list = [0, 1];
  var a = list[0];  // ⓐ
  var b = list[1];
  var c = list[2] || -1;  // ⓑ
  var temp = b;
  b = a;
  a = temp;
  var obj = {
      k1: 'one',
      k2: 'two'
  };
  var k1 = obj.k1;  // ⓒ
  var k2 = obj.k2;
  var k3 = obj.k3 || 'default val';  // ⓓ
  var new_k = obj.k1  // ⓔ

  ┌ ⓐ : 배열의 인덱스를 활용하여 변수에 할당하였음
  ├ ⓑ : || 연산자를 이용하여 배열의 해당 인덱스에 값이 없으면 기본값으로 할당함
  ├ ⓒ : 객체의 키값을 변수에 할당함
  ├ ⓓ : || 연산자를 이용하여 객체의 해당 키값이 없으면 기본값으로 할당함
  └ ⓔ : 객체의 키값을 다른 변수에 할당함

 

•  ES6의 구조 분해 & 구조 할당 :

  
      
  
        
        
        
        
      
  var list = [0, 1];
  var [
      a,  // ⓐ
      b,
      c = -1  // ⓑ
  ] = list;
  [b, a] = [a, b];  // ⓒ
  var obj = {
      k1 : 'A'
      k2 : 'B'
  };
  var {
      k1: new_k1,  // ⓓ
      k2,  // ⓔ
      k3 = 'default val'  // ⓑ
  } = obj;

  ┌ ⓐ : 대괄호 블록 사이에 추출하고자 하는 값의 인덱스 위치에 변수를 배치함
  ├ ⓑ : 기본값을 할당함
  ├ ⓒ : 배열의 두 값을 치환함
  ├ ⓓ : 추출된 키값을 다른 변수명으로 할당함
  └ ⓔ : 객체의 키값을 변수에 할당함

 

---

 

라이브러리 의존성 관리

• 기존 자바스크립트의 라이브러리 의존성 관리 :
  • script 엘리먼트를 이용하여 관리했음
  • 직접 만든 모듈을 공유할 때는 전역 변수를 사용했음
    예를 들어 lib 폴더에 있는 math.js에 sum() 함수와 pi를 선언했다면
    전역 변수를 선언하고 객체 안에 함수를 정의하여 담을 수 있음
    이후에 다른 파일에서 math.js에 정의된 함수를 참조하여 사용할 수 있음
  • script 엘리먼트의 선언 순서가 매우 중요함
• ES6의 라이브러리 의존성 관리 :
  • import 구문을 사용하여 script 엘리먼트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동함