[React JS] 리액트 템플릿 문자열 | Template String

 

가장 먼저 알아볼 ES6 문법은 템플릿 문자열(template string)입니다. 

템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용합니다. 

기존 자바스크립트의 문자열 사용 방법 알아보기

기존 자바스크립트에서는 문자열과 문자열 또는 문자열과 변수를 연결하려면 병합 연산자(+) 를 사용해야 했습니다. 

다음은 병합 연산자로 문자열과 문자열 또는 문자열과 변수를 연결하는 예제입니다. 

---

var stringl = '안녕하세요'; 
var string2 = '반갑습니다'; 
var greeting = stringl + ' ' + string2;
var product = { name: '도서', price: '4200원' }; 

var message = '제품' + product.name + '의 가격은' + product•price + '입니다';

var multiLine = '문자열1\n문자열2'; 0 
var valuel = 1; 
var value2 = 2; 
var boolValue = false; 
var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.';
var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다.';

 

템플릿 문자열은 작은따옴표(' ') 대신 백틱(`)으로 문자열을 표현합니다.

또한 템플릿 문자열에 특수 기호 $를 사용하여 변수 또는 식을 포함할 수도 있습니다.

다음은 위의 예제에 템플릿 문자열을 도입하여 개선한 것입니다.

개선된 내용을 보면 왜 템플릿 문자열이 유용한지 금방 알 수 있을 것입니다.

 

var stringl = '안녕하세요'; 
var string2 = '반갑습니다'; 
var greeting = `${string1} ${string2}`;
var product = { name: '도서', price: '4200원' }; 

var message = `제품${product.name}의 가격은 ${product.price}입니다`;

var multiLine = `문자열1 문자열2`
var valuel = 1; 
var value2 = 2; 
var boolValue = false; 
var operator1 = `곱셈값은 ${value1 * value2}입니다.`;
var operator2 = `${booValue ? '참': '거짓'}입니다.`;

 

다음은 병합 연산자로 표현된 코드다. 템플릿 문자열로 변경해보자.

 

 

var cart = {name : '도서', price : 1500};
var getTotal = function(cart) {
  return `${cart.price}원`;
};

var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)} 입니다.`;