[React] 템플릿 문자열

React의 템플릿 문자열 사용 방법입니다.

 

function App() {
  var cart = { name: '계란과자', price: 1000 };
 
  var getTotal = function (cart) {
    return cart.price + '원';
  };

 

cart라는 변수에 name과 price에 맞는 임의의 값을 넣어줍니다. 그리고 getTotla 함수를 만들어서 cart에 있는 price에 '원'을 붙여줍니다.

 

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

 

myCart에 저장되는 문자열이 템플릿 문자열을 사용한 것 입니다. `` ← window 기준 ~표시 있는 키에 있습니다. 템플릿 문자열을 사용함으로써 getTotal에서 사용했던 것처럼 일일이 + 기호를 사용하여 넣어주지 않아도 됩니다.

 

  return (
    <div className="App">
      <h1 className="title">{myCart}</h1>
    </div>
  );
}
 
export default App;

 

이렇게 만들어진 myCart를 출력해주면 아래의 그림처럼 나오게 됩니다.

 

결과 화면