전체적인 틀은 다 잡았기 때문에 세세하게 내가 구현하고자 하는 기능을 넣기 시작했다.
모델명을 선택했을 때 사이즈를 선택할 수 있게 disabled가 풀리고 둘 다 선택했을 때 밑에 내가 선택한 목록들이 묶여 새로운 div가 생기도록 했다. 여기에서 장바구니에 넣거나 바로 구매를 하려면 선택 란이 한번에 묶여 있어서 구매하길 원하는 갯수도 따로 관리, 가격도 따로 관리 하여 백엔드로 보내줘야 하지 않을까 싶었다.
틀만 짤 때는 급한대로 형태만 만들어서 사진에서 M에서 +를 누르면 M사이즈와 S사이즈가 함께 숫자가 늘어났었다.
그리고 각각 갯수를 관리하기 위해
this.state{
modelOption: "모델명",
modelSize: "사이즈",
price: 61000,
userCartArray:[]
}사용자가 원하는 품목의 색상과 사이즈를 골랐을 때,
userCartArray라는 배열에
{
modelOption: "03)HE384",
modelSize: "black",
count: 1,
price: this.state.price
}
이렇게 필요한 값과 변화시켜줄 값을 넣어주도록 한다.
이렇게!
그리고 갯수를 관리해주는 + 버튼에 onClick하면 실행될 함수에 index도 넣어줘서
호출해준다.
그리고 나는 unshift와 같이 직접 state값에 접근했다가 나중에 setState를 다시 해주는 방식으로 생각하고 코드를 썼었는데, 승현 멘토님과 얘기해보면서 state값은 언제나 직접 접근하면 절대 안됀다고 하셨다.
오늘도 새로운 것을 배워갑니다...!
그래서 다른 방법으로 ,
변수에 넣기!!
내가 바꾸고 싶은 state의 요소를 const 변수에 넣어준다.
const tempObj = {...this.state.userCartArr[i]};
에서 저 ...은 그 뒤에 적힌 것의 모든것을 가지고 오겠다는 의미라고 한다.
이렇게 하니까 선택한 index에서만 갯수와 가격이 변동되서
이거 하고 나니까 약간 욕심이 생겼다. 장바구니까지 만들고 싶은 욕심!!
시간이 좀 더 있으면 좋겠다 ㅜㅜ
