3.4.5 토글 기능이 있는 <장바구니 담기> 버튼 추가

체크아웃 페이지에 사용할 버튼을 추가하겠습니다. 애플리케이션에 새 메서드와 속성을 추가하는 것으로 시작해 봅시다.

코드 3-15 <장바구니 담기> 버튼 추가하기: chapter-03/cart-button.js

data: {
  showProduct: true, -- 이 속성은 상품 페이지를 보여 줄지 체크합니다. 
...
},
methods: {
...
  showCheckout() { -- showCheckout 메서드는 <장바구니 담기> 버튼을 누른 후 실행됩니다. 
     this.showProduct = this.showProduct ? false : true; -- 참과 거짓을 전환하는삼항 연산을 보여 줍니다. 
  },
}

---

 

새로운 속성인 showProduct는 체크아웃 페이지 표시를 전환할 것입니다. 더 자세히 알아봅시다. showCheckout 메서드는 자바스크립트의 삼항 연산을 사용해서 showProduct 속성을 전환합니다. 삼항 연산자(ternary operator)는 if 문의 단축문이며 매개변수가 3개 있습니다. 첫 번째 매개변수는 조건으로, 여기서는 this.showProduct에 해당합니다. 참이면 첫 번째 표현식을 거짓으로 반환합니다. 거짓이면 마지막 표현식을 참으로 반환합니다. 삼항 조건 연산자는 빠르게 조건문을 만들어야 할 때 아주 유용합니다.