3.2.2 <장바구니 담기> 버튼에 이벤트 연결
사용자가 장바구니에 상품을 담으려면 버튼이 필요합니다. cart 배열에 ‘상품 추가’를 처리하는 함수를 해당 버튼 클릭 이벤트에 연결하겠습니다.
마크업에 버튼을 추가하기 전에 함수를 먼저 작성해야 합니다. 그러려면 애플리케이션 옵션에 method 객체를 추가해야 합니다. filters 객체 다음에 코드 3-2를 삽입하세요(filters 객체 이후에 쉼표 넣는 것을 잊지 마세요).
코드 3-2 장바구니 담기 메서드: chapter-03/add-to-cart.js
아직까지 장바구니에 상품을 추가하는 것은 cart 배열에 상품 데이터에서 가져온 상품 .id 속성을 추가하는 것을 의미합니다. 기억하세요. this 키워드를 추가해야 모든 데이터 속성 값에 접근할 수 있습니다.
Note 객체가 아니라 id 넣기
코드 3-2의 this.cart.push(this.product);처럼 cart 배열에 전체 상품 객체를 넣는 것이 더 간단해 보이지만, 그렇게 하면 조금 이상할 수 있습니다. 자바스크립트는 순수 참조 - 전달 언어도 아니고 복사 - 전달 언어도 아니기 때문에 어느 쪽이 언제 일어나는지 알려면 연습이 좀 필요합니다.
cart 배열에 상품을 추가하면 복사된 객체가 아니라 데이터에 정의된 상품 객체 참조가 들어갑니다. 서버에서 새로운 상품 데이터를 가져온 후 데이터 상품 정의가 달라지면, 장바구니 상품이 바뀌거나 참조가 undefined 될 수 있습니다.
그 대신에 cart 배열에 상품 id를 넣어 참조가 아닌 상품 id의 값 복사본을 추가할 수 있습니다. 상품 정의가 바뀌어도 cart 배열 값은 바뀌지 않습니다.
기술적으로 보면 자바스크립트는 공유 호출(call-by-sharing) 언어입니다. https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_sharing에서 공유 호출이 다른 방식들과 어떻게 다른지 확인할 수 있습니다.