이번 시간에서는
장바구니 항목의 외관에 대해 이어 진행해보겠습니다
이 작업은 꽤 단순한 작업이 될 것입니다
Cart 컴포넌트 안에
JSX 코드를 좀 추가하거나
장바구니 항목 컴포넌트를 따로 생성하면 되는데
저는 두 번째 방식으로 작업하겠습니다
여러분은 편하신 방식대로 하시면 됩니다
맞고 틀리는 문제가 아니기 때문입니다
제 경우에는 장바구니 항목 컴포넌트를 따로 만들겠습니다
이렇게 하면 이 컴포넌트의 JSX 코드가 좀 더 간결해집니다
물론 이 방식 대신에
장바구니 항목 마크업을
이 컴포넌트에 추가하셔도 됩니다
이 새로운 컴포넌트 파일에
일단 시작으로는
장바구니 항목 컴포넌트 함수를 내보내겠습니다
이 컴포넌트 함수에서
최종 목표는 JSX 코드를 반환하는 것입니다
여기에서는 목록 항목을 반환하겠습니다
이 항목은 스타일링을 위해 클래스 이름으로
cart-dash를 설정해 두겠습니다
이제 이 목록 항목에
paragraph를 추가하겠습니다
이 문단은 마지막에 장바구니 항목 이름을 반환합니다
그리고 대시로 구분한 뒤에 그 다음에는
수량과 금액을 곱한 값입니다
이 부분은
조금 후에 실제 데이터로 대체하겠습니다
아래쪽에는 p태그를 하나 더 만들어서
버튼을 여러 개 만들어서
장바구니 항목과 상호작용할 수 있도록 만들겠습니다
버튼 하나는 수량을 줄이고
다른 버튼은 수량을 늘리게 됩니다
이 버튼 사이에는
span 태그로 현재 수량(QTY)을 반환하겠습니다
커스텀 버튼 컴포넌트를 사용하지는 않겠습니다
그 이유는 이 함수에 사용하는 버튼은
형식을 다르게 적용할 것이기 때문입니다
그러므로 그 대신
이 문단에 클래스 이름을 주는데
이름은 cart-item-actions로 하겠습니다
이 부분의 형식을 설정해 주는 클래스입니다
이제 여기에 데이터 입력값이 필요합니다
엄밀히 말하면
이 컴포넌트가 렌더링된 항목이 필요합니다
그리고 거기에서
속성을 하나만 받을 수도 있고
속성(attribute) 여러 개에 여러 속성(prop)을 받을 수도 있습니다
여기에서는 속성(prop)을 여러 개 받으면서
새로운 작업방식을 보여드리겠습니다
여기에서 받을 내용은 name(이름), quantity (수량)
그리고 price (금액) 데이터입니다
여기에서는 이름을 반환하고
여기에서는 수량을 반환하고
이 아래쪽에서도 반환하겠습니다
여기에서는 금액을 반환하겠습니다
금액은 형식을 변환해서 맞춰야 합니다
그러므로 이전에 만들어 뒀던 currencyFormatter를
여기에서 사용하겠습니다
이전에 추가해둔 형식 파일(formatting.js)에서 가져오겠습니다
그리고 format을 불러와서 금액에 적용하겠습니다
이 시점에서는 이 정도로 작업을 마치겠습니다
이제 장바구니 컴포넌트에서
장바구니 항목을 이 목록에 반환하겠습니다
방금 작업한 장바구니 항목 컴포넌트를
일단은 가져와야 합니다
이렇게 가져온 뒤에는
키(key)가 필요한데, 이미 배우셨듯이
목록의 모든 항목은 키를 받아야 하기 때문입니다
여기에서도 item.id를 키로 쓰겠습니다
그리고 여기 있는 이름, 수량 그리고 금액이 필요합니다
항목 데이터를 보내는 간단한 방법이 있습니다
여기에서는 이름, 수량과 금액을
장바구니 항목 컴포넌트로 보내야 하는데
바로 항목 객체를 장바구니 항목으로
펼치는 것입니다
항목 객체가 이미 필요한 이름, 수량과 금액을
모두 포함하기 때문입니다
물론 꼭 필요하지 않은 다른 데이터도
포함하고 있기는 합니다
이 작업에서는 이 부분이 큰 문제가 되지 않고
필요하지 않은 데이터를 컴포넌트로 보내도 됩니다
이 작업을 위한 또다른 접근방식이 있다면
직접 이름을 item.name으로 설정하고
수량을 item.quantity로 설정하고
금액을 item.price로 설정하는 것입니다
이렇게 됩니다
이 상태로 저장하고 확인해 보면
이전보다 더 잘 만들어진 형식을 갖췄습니다
여기 있는 이 버튼도 작동을 해야 하지만
지금으로서는 작동하지 않습니다
이 버튼을 위한 로직은 이미
장바구니 컨텍스트에 있습니다
여기에서는 버튼을 눌렀을 때 addItem과 removeItem
이 두 함수가 실행되어야 합니다
이 두 함수를 실행하기 위해
사용할 수 있는 방법은
CartItem의 컨텍스트를 사용하는 것입니다
이제 다른 방식으로 작업을 해 보겠습니다
이 방식은 여러분이 이미
이전 강의에서 배운 내용입니다
바로 추가 속성을 받음으로써
함수를 값으로 받는 것인데
속성 이름은 onIncrease와 onDecrease로 하겠습니다
그리고 이 속성들을 버튼의 onClick 속성의 값으로
사용하겠습니다
onDecrease는 빼기에 해당하는 버튼
onIncrease는 더하기 버튼에 사용하겠습니다
이 작업을 하면
이 컴포넌트는 더이상 이 컨텍스트를
사용할 필요가 없습니다
물론 사용한다고 해도 문제가 되지는 않습니다
하지만 이 컴포넌트를 더 간결하게 만들기 위해
그리고 여기에 코드를 더할 때
이 컨텍스트를 사용하지 않기 위해
이런 방식으로 속성을 받고
부모 컴포넌트로 넘어가 보겠습니다
바로 장바구니 컴포넌트인데, 여기에 이 속성을 설정하겠습니다
즉 onIncrease를 어떤 값에 대응하고
onDecrease도 마찬가지입니다
여기서 말하는 어떤 값이란
장바구니 컨텍스트 함수들을 실행하는 어떤 함수입니다
즉 addItem과 removeItem입니다
장바구니 항목은 이미 장바구니 컨텍스트에 접근할 수 있습니다
그러므로 추가 함수를 실행시키는 것은
여기에 이름 없는 함수를 전달하는 간단한 작업입니다
즉 onIncrease에 전달해서
cartCtx와 addItem을 호출하고
이 항목을 전달하겠습니다
이 항목에서는 CartItem을
addItem의 값으로 렌더링합니다
그리고 onDecrease에서는
cartCtx와 removeItem을 호출하는 함수를 사용합니다
이 함수에는 item.id를 전달하겠습니다
그리고 이것이 두 번째 방식입니다
이 방식의 장점은
이 장바구니 항목 컴포넌트가
좀더 간결하고 깔끔해진다는 것입니다
이제 저장하고 확인해 보면
이 버튼이 이제 작동합니다
이제 메뉴의 수량을 늘릴 수 있고
줄임으로써 장바구니에서 뺄 수도 있습니다
그러므로
이 다음 단계는
여기에서 결제창으로 넘어가게 하는 작업입니다
사실 이 버튼은 장바구니에 항목이 있어야만
보이는 것이 좋습니다
그 이유는, 예를 들어서
만약 장바구니에 항목이 없다면
이 버튼이 보여서는 안 됩니다
결제할 내용이 아직 없기 때문입니다
만약 장바구니에 항목이 있다면
이 버튼을 누르면 다른 모달로 넘어가서
결제를 할 수 있게 될 것입니다