리액트 ES6 문법 - 템플릿 문자열

아래 책을 읽고 정리한 내용입니다.

https://m.yes24.com/Goods/Detail/87631428

Do it! 리액트 프로그래밍 정석 - 예스24

 

템플릿 문자열

템플릿 문자열 사용 방법

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

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

// ES5 문법
var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = string1 + ' ' + string2;
var product = { name: '도서', price: '4200원' };
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 ? '참' : '거짓') + '입니다. ';

• 문자열 + 문자열 or 문자열 + 변수 → 병합 연산자(+)를 써야 했음!
• 병합 연산자는 코드가 복잡해보임 → ES6에서 템플릿 문자열을 도입함!

 

ES6의 문자열 사용 방법 알아보기

//ES6 문법
var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2}`;

var product = { name: '도서', price: '4200원' };
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 ? '참' : '거짓'}입니다.`;

• 문자열을 작은따옴표 대신 백틱으로 표현함!
• 특수 기호 $를 넣어서 변수 또는 식을 포함할 수도 있다.
• 엔터로 줄바꿈도 허용한다! → 기존의 이스케이프 시퀸스를 사용하지 않아도 됨

 

연습 문제

Q. 다음은 병합 연산자로 표현된 코드이다. 템플릿 문자열을 적용하여 바꿔보자.

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

A. 정답 코드

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