[React] Template Literals

템플릿 리터럴
변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 것

---

간단한 문자열 삽입

사용방법

문자열 구성 : 백틱 (``) 사용
변수, 표현식 : ${expression}

예시

• 템플릿 리터럴 사용하지 않았을때:

let customer = { name: "홍길동" };
let item = { name: "커피", price: 4000 };
console.log("감사합니다, " + customer.name + "님. " + item.name + "을(를) " + item.price + "(원)에 구매하셨습니다.");
// 출력: 감사합니다, 홍길동님. 커피을(를) 4000(원)에 구매하셨습니다.

• 템플릿 리터럴 사용:

let customer = { name: "홍길동" };
let item = { name: "커피", price: 4000 };
console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);
// 출력: 감사합니다, 홍길동님. 커피을(를) 4000(원)에 구매하셨습니다.

console.log에 백틱을 사용하여도 같은 출력 결과를 얻을 수 있다.

---

여러줄 문자열

문자열

• 템플릿 리터럴 사용하지 않았을때 :

let orderDetails = "고객: " + customer.name + "\n" +
                   "상품: " + item.name + "\n" +
                   "가격: $" + item.price;
console.log(orderDetails);
// 출력
// 고객: 홍길동
// 상품: 커피
// 가격: 4000

• 템플릿 리터럴 사용 :

let orderDetails = `고객: ${customer.name}
상품: ${item.name}
가격: $${item.price}`;
console.log(orderDetails);
// 출력
// 고객: 홍길동
// 상품: 커피
// 가격: 4000