ReactJS 기초 Template Literals

Template Literals

템플릿 리터럴은 변수와 표현식을 문자열(``) 안에 쉽게 삽입할 수 있게 해주는 문법.

const customer = {
  name: "르탄이", // 밸류값에 "" 주는거 까먹었었음 => 르탄이 is not defined
};

const item = {
  name: "커피",
  price: 4000,
};

템플릿 리터럴을 사용하지 않은 기본 방법

console.log(
  "감사합니다. " +
    customer.name +
    "님! " +
    item.name +
    "를(을) " +
    item.price +
    "원에 구매하셨습니다!"
); // 감사합니다. 르탄이님! 커피를(을) 4000원에 구매하셨습니다!

=> 방법이 복잡하고 귀찮음

템플릿 리터럴을 사용한 방법 `` ${} 사용

console.log(
  `감사합니다. ${customer.name} 님! ${item.name}를(을) ${item.price}원에 구매하셨습니다!`
); // 감사합니다. 르탄이 님! 커피를(을) 4000원에 구매하셨습니다!

일일히 "", + 기호를 사용하는것에서 => ``안에 모든 요소를 편하게 적기 가능

---

문자열을 여러 줄로 작성하는 목적으로도 많이 사용된다

여러 줄 작성 시 기존의 방법

const orderDetails =
  "고객 : " +
  customer.name +
  "\n" +
  "상품 : " +
  item.name +
  "\n" +
  "가격 : " +
  item.price;
  
console.log(orderDetails); 
고객 : 르탄이
상품 : 커피
가격 : 4000

=> 세로 정렬 잘됨 그러나 매우 번거로움

여러 줄 작성 시 템플릿 리터럴을 사용한 방법

const orderDetails2 = `
고객 : ${customer.name}
상품 : ${item.name}
가격 : ${item.price}
`;
console.log(orderDetails2); // 별도의 특수 기호 없이 출력하고 싶은 위치 그대로 타이핑이 가능
고객 : 르탄이
상품 : 커피
가격 : 4000