React ES6 (1) - 템플릿 문자열, 전개 연산자, 가변 변수 & 불변 변수

템플릿 문자열

• JavaScript의 문자열 :

var string1 ='안녕하세요'
var string2 ='환영합니다'
var welcome = string1 + ' ' + string2;  // ⓐ

var product = { name: '책', price: '5000원' };
var message = '제품' + product.name + '의 가격은' + product.price + '입니다';  // ⓑ

var multiLine = '문자열1\n문자열2';  // ⓒ

var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.';  // ⓓ
var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다.';  // ⓓ

┌ ⓐ : 병합 연산자를 사용하여 문자열과 문자열을 연결함

├ ⓑ : 문자열과 변수를 연결할 때도 병합 연산자를 사용함

├ ⓒ : 줄바꿈을 할 때는 \n을 문자열에 포함시킴

└ ⓓ : 연산 결과를 괄호로 묶어 연산 구문을 먼저 실행함

 

 

• ES6의 문자열 :

var string1 = '안녕하세요';
var string2 = '환영합니다';
var welcome = `${string1} ${string2}`;  // ⓐ

var product = { name: '책', price: '5000원' };
var message = `제품 ${product.name}의 가격은 ${product.price}입니다`;  // ⓐ

var multiline = `문자열1
문자열2`;  // ⓑ

var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다.`;  // ⓒ
var operator2 = `${boolValue ? '참' : '거짓'}입니다.`;  // ⓒ

┌ ⓐ : $ 기호를 사용하여 변수를 포함함

├ ⓑ : \n 을 사용하지 않아도 됨

└ ⓒ : $ 기호를 사용하여 연산을 포함시킴

 

 

• 예시 (병합 연산자로 표현) :

var car = { name: '도서', price: 1500 };
var getTotal = function(cart) {
    return cart.price + '원';
};
var myCart = '장바구니에 ' + cart.name + '가 있습니다. 총 금액은 ' + getTotal(cart) + '입니다.';

• 결과 (템플릿 문자열을 적용)

var cart = { name: '도서', price: 1500 };
var getTotal = function(cart) {
    return `${cart.price}원`;
};
var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)}입니다.`;

 

---

 

전개 연산자

• 전개 연산자
  • 전개 연산자는 나열형 자료를 추출하거나 연결할 때 사용함
  • 사용 방법은 배열이나 객체, 변수명 앞에 마침표 세 개(...)를 입력함
  • 하지만, 배열 / 객체 / 함수 인자 표현식([], {}, ()) 안에서만 사용해야 함
• 기존 문법으로 배열의 일부 요소를 잘라내거나 연결한 예제 :

  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 three = array1[2] || 'empty';  // ⓓ
  
  function func() {
      var args = Array.prototype.slice.call(arguments);  // ⓔ
      var first = args[0];
      var others = args.slice(1, args.length);  // ⓕ
  }

  ┌ ⓐ : 배열의 각 요소를 추출하여 새로운 배열을 만들었음
  ├ ⓑ : concat() 함수로 두 배열을 합쳤음
  ├ ⓒ : 인덱스로 배열 요소를 추출했음
  ├ ⓓ : || 연산자와 조합하면 추출할 배열 요소가 없을 때 기본값을 지정할 수 있음
  ├ ⓔ : 특수 변수(arguments)를 사용하여 함수 내 인자 항목들을 배열로 변환하였음
              func(a, b, c)에서 args[0]은 a, args[1]은 b, args[2]는 c항목으로 각각 할당됨
  └ ⓕ : 인덱스 범위에 해당하는 배열 요소를 추출함
             args.length가 전체 배열의 길이이므로 인덱스 범위 1번부터 마지막 항목까지 추출됨
  
  
  
• 위 예제에서 ES6의 전개 연산자를 도입한 예제 :

  var array1 = ['one', 'two'];
  var array2 = ['three', 'four'];
  
  const combined = [...array1, ...array2];  // ⓐ
  const [first, second, three = 'empty', ...others] = array1; // ⓑ
  
  function func(...args) {
      var[first, ...others] = args;
  }  // ⓒ

  ┌ ⓐ : 두 배열 항목을 전개 연산자로 합쳤음
      ⓐ의 결과 : combined = ['one', 'two', 'three', 'four'];
  ├ ⓑ : first와 second에 array1의 각 위치에 있는 요소를 추출했음
           three에 기본값과 함께 배열 요소를 추출했음
           ...others는 first, second, three에서 추출하고 남은 요소를 추출했음
      ⓑ의 결과 : first = 'one', second = 'two', three = 'empty', others = []
  └ ⓒ : ...args에서 함수 인자 배열을 args 변수에 할당했음
  
  
  
• 객체 내장 함수를 사용한 예제

  var objecOne = { one: 1, two: 2, other: 0};
  var objecTwo = { three: 3, four: 4, other: -1};
  
  var combined = {
      one: objectOne.one,  // ⓐ
      two: objectOne.two,
      three: objectTwo.three,
      four: objectTwo.four
  }
  var combined = Object.assign({}, objectOne, objectTwo);  // ⓑ
  var combined = Object.assign({}, objectTwo, objectOne);  // ⓒ
  var others = Object.assign({}, combined);
  delete others.other;  // ⓓ

  ┌ ⓐ : 키에 해당하는 값을 추출함
  ├ ⓑ : 객체 내장 함수 assign()을 사용하여 두 객체를 병합함
            assign()의 첫 번째 인자는 결과로 반환할 객체이며({}), 나머지 인자는 병합할 객체임
            이 때 병합할 객체는 앞에 있는 객체부터 덮어쓰므로 objectTwo의 값으로 덮어씀
      ⓑ의 결과 : combined = { one: 1, two: 2, three: 3, four: 4, others: -1}
  ├ ⓒ : 중복되는 키값이 있으면 이후에 전달된 객체의 값으로 덮어씀
      ⓒ의 결과 : combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
  └ ⓓ : 삭제 연산자(delete)를 사용하여 특정 데이터를 추출한 다음 새로운 객체를 만들었음
  
  
  
• 위 예제에서 ES6의 전개 연산자를 도입한 예제 :

  var objectOne = {one: 1, two: 2, other: 0};
  var objectTwo = {three: 3, four: 4, other: -1};
  
  var combined = {
      ...objectOne,  // ⓐ
      ...objectTwo
  };
  // 결과 : combined = { one: 1, two: 2, three: 3, four: 4, other: -1}
  
  var combined = {
      ...objectTwo,
      ...objectOne  // ⓑ
  };
  // 결과 : combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
  
  var { other, ...others } = combined;  // ⓒ
  // 결과 : others = { one: 1, two: 2, three: 3, four: 4}

  ┌ ⓐ, ⓑ : 두 객체를 병합할 때 중복된 키값들은 마지막에 사용한 객체의 값으로 덮어씀
  └ ⓒ : 객체에서 특정값을 추출할 때는 추출하려는 키 이름(other)을 맞추고
             나머지는 전개 연산자로 선언된 변수(others)에 할당할 수 있음
  
  

---

 

가변 변수와 불변 변수

• 기존 자바스크립트 문법은 변수 선언에 var 키워드를 사용함

 

• ES6의 가변 변수 
  • 가변 변수는 let 키워드로 선언함
  • let으로 선언한 변수는 읽거나 수정 가능
• ES6의 불변 변수
  • 불변 변수는 const 키워드로 선언함
  • const로 선언한 변수는 읽기만 가능
  • But, 불변 변수는 값을 다시 할당할 수는 없지만 값을 변경할 수는 있음
• 예시 :

  // 자료형 오류 발생
  const num = 1;
  num = 3;  // 자료형 오류 발생!
  
  const str = 'ABC';
  str = 'DEF';  // 자료형 오류 발생!
  
  const arr = [];
  arr = [1, 2, 3];   // 자료형 오류 발생!
  
  const obj = {};
  obj = { name: '후니' };  //자료형 오류 발생!
  
  
  
  // 오류 발생 X
  const arr2 = [];
  
  arr2.push(1);  // arr2 = [1]
  
  arr2.splice(0, 0, 0);  // arr2 = [0, 1]
  
  arr2.pop();  // arr2 = [1]
  
  
  const obj2 = {};
  
  obj2['name'] = '후니';  // obj2 = { name: '후니' }
  
  Object.assign(obj2, { name: '후니2' });  // obj2 = { name: '후니2' }
  
  delete obj2.name;  // obj2 = {}

  └ 오류 발생 X 부분에서 배열이나 객체를 불변 변수로 선언하고 자바스크립트 내장 함수로 값을 변경하였음.
      이런 것들을 '무결성 제약 조건에 위배되었다'라고 한다

 

• 무결성 제약 조건에 위배되지 않기 위해서
  • 배열에 새로운 값을 추가할 때는 push() 함수 대신 concat() 함수를 이용
  • 삭제할 때는 pop(), shift() 함수 대신 slice(), concat() 함수에 전개 연산자를 조합하여 사용
  • 위 처럼 하면 새값을 할당하는 것이 아니라 기존의 값을 이용하여 새 불변 변수에 할당하는 것이므로 괜찮음
• 예시 :

  const num1 = 1;
  const num2 = num1 * 3;  // num2 = 3
  
  const str1 = '문자';
  const str2 = str1 + '추가';  // str2 = '문자추가'
  
  const arr3 = [];
  const arr4 = arr3.concat(1);  // arr4 = [1]
  const arr5 = [...arr4, 2, 3];  //  arr5 = [1, 2, 3]
  const arr6 = arr5.slice(0, 1);  // arr6 = [1], arr5 = [1, 2, 3]
  const [first, ...arr7] = arr5;  // arr7 = [2, 3], first = 1
  
  const obj3 = { name: '후니', age: 25 };
  const objValue = { name: '후니2', age: obj3.age };
  const obj4 = { ...obj3, name: '후니2' };  // obj4 = { name: '후니2', age: 25 }
  const { name, ...obj5 } = obj4;  // obj5 = { age: 25 }

  
  
  
• 기존 자바스크립트의 가변 내장 함수와 무결성 내장 함수를 병렬로 나열한 표 :

  가변 내장 함수	무결성 내장 함수
  push(...items)	concat(...items)
  splice(s, c, ...items)	slice(0, s) .concat(...items, slice(s+c))
  pop()	slice(0, len - 1)
  shift()	slice(1)

 

※ 불변 변수를 사용하면 무결성 제약 규칙에 의해 변수가 변하는 시점을 쉽게 파악할 수 있고
   수정 전과 후의 변수값을 비교할 수 있기 때문에 가변 변수보다 더 유용함