완전히 여기 컨텍스트로 옮기기 위해서
일단은 Product 컴포넌트에 있는
onAddToCart 속성을 먼저 삭제해 주겠습니다
Product 컴포넌트 안에 있던 부분은
이미 삭제를 해두었기 때문에
여기에선 의미가 없기 때문입니다
Header 컴포넌트에 있는 두 개의 속성도 삭제하는 대신
여기에도 컨텍스트를 사용할 예정입니다
그렇게 되면 Header 컴포넌트 자체에는
속성이 더 이상 남아있지 않게 됩니다
이 쪽 정리가 다 되었으니
이제 Header 컴포넌트로 가보면
장바구니 관련 데이터가 필요한 것을 볼 수 있습니다
장바구니 안 물건들의 수량을 필요로 하기 때문에
cartItems 배열의 길이가 필요한데
이것은 앞서
들어오는 cart 속성에서 추출했던 것입니다
그러나 그 속성은 이미 모두 삭제했기 때문에
우리는 다른 해결책을 찾아야 합니다
한 층위 위로 올라가서 store/shopping-cart-context.jsx 로부터
CartContext를 불러올수 있고
물론 useContext 훅을 불러와서
Header 컴포넌트 함수에 들어있는
CartContext를 가져올 수도 있습니다
그리고 거기에서
destructuring(구조 분해)와 함께 items 배열을 가지고 오면
itemgs.length가 여기 그대로 있는 것을 볼 수 있습니다
그러나 이 업데이트용 함수를 전달하지 않겠습니다
cartItems 또한 마찬가지입니다
왜냐하면 해당 값들은 이제
CartModal 컴포넌트가 내부에서
자체적으로 습득할 수 있고
이를 통해 여기 Header 컴포넌트를
보다 가벼운 코드로 만들어줄 수 있기 때문입니다
이제 CartModal 컴포넌트에서도
컨텍스트에 접근해 보도록 하겠습니다
여기에 우리는 import 명령을 사용해서 CartContext를 불러오고
한 층위 위의 store/shopping-cart-context.jsx 에서 CartContext를 불러오고
리액트로부터 useContext를 불러오고
이전과 마찬가지로
CartModal 컴포넌트의 useContext 훅을 이용해서
useContext에게 CartContext를 값으로 전달합니다
여기에는 두 가지가 필요한데
items가 필요하고 업데이트를 위한 함수도 필요합니다
현재로서는 물건의 수량을 업데이트해줄 함수가
이 컨텍스트에 노출되지 않았기 때문에
컨텍스트를 통한 처리가 불가능합니다
그렇기에 이 컨텍스트 값을 업데이트하고
이 객체에 새로운 속성을 더해주어야 합니다
예를 들자면 이 updateItemQuantity 함수인데
handleUpdateCartItemQuantity 를 가리키고 있습니다
여기 제 기본값에도 추가해서
자동완성 기능에 적용되도록
컨텍스트를 만들어 주는 것입니다
이제 CartModal 컴포넌트로 돌아가서
그곳의 updateItemQuantity 함수를 추출해 줍니다
그런데 여기 이 값들이 저희에게 정말 필요할까요?
여기 코드를 살펴보면 그에 대한 답은 아니오 입니다
왜냐하면 이 Modal 컴포넌트는
그저 Cart 컴포넌트를 묶어주고만 있기 때문입니다
그 자체는 장바구니에 대한 정보가 전혀 필요 없습니다
그렇다면 이제 우리가 해야 할 일은
Cart 컴포넌트의 이 속성들을 삭제해 주고
CartModal 컴포넌트에 있는 cartItems 속성과
onUpdateCartItemQuantity 속성을 삭제하는 것입니다
이제 이 컴포넌트에서 불필요해진
이 컨텍스트를 없애주면 됩니다
여기에 있는 import문 내용도 지워주면 되는데
이것이 바로 컨텍스트 사용의 장점입니다
필요한 곳에서는 사용하되
그 외의 위치에서는 사용할 필요가 없다는 것입니다
이번에는 장바구니 파일(Cart.jsx)로 와 보겠습니다
이미 이 컨텍스트를 사용하고 있기 때문에
더 이상 이 속성에서 값을 구하지 않으므로
이 속성 삭제할 수 있습니다
그 대신 이 updateItemQuantity 함수로
컨텍스트에서 추출을 해야 하니
이 Cart 컴포넌트에서
updateItemQuantity 함수를 불러와주고
여기 있는 두 개의 버튼을 클릭해서
cartItems 의 수량을 편집할 수 있도록 만들어 줍니다
이렇게 해주면 Cart 컴포넌트에는
더이상 함수가 없는 상태가 됩니다
CartModal 컴포넌트에도
더이상 장바구니 관련 함수가 없고
여기에도 함수 설정을 하지 않습니다
Header 컴포넌트에서는
장바구니 관련 내용이 사용되기는 하지만
CartModal로 관련 데이터를 가진 함수를 전달하지는 않습니다
앱 컴포넌트에서도 마찬가지로
Header나 Product로 전달하는 것이 없는데
정확히는 장바구니 관련 내용을 전달하지 않습니다
그러므로 Product 컴포넌트에서도
더이상 장바구니 관련 내용을 받지 않는데
이것은 모든 컴포넌트에서 컨텍스트를 이용해
관련 값 등을 가지고 변형시킬 수 있도록
만들어 두었기 때문입니다
이제 이것을 저장하고 새로고침을 해 보면
앱은 이전과 마찬가지로 잘 구동됩니다
여전히 장바구니에 물건을 추가하거나
장바구니 안에서 업데이트가 가능합니다
이렇게 모든 것이 구동되는 데에는
이 컨텍스트 기능이 사용되었고
이것으로 프로퍼티 내리꽂기 문제를 해결할 수 있었습니다