장바구니에 추가할 데이터를 index.js 안에 만들어 주자.
이렇게 반복문을 짜놓고 돌려보면
store안에서 return해주는 데이터값의 갯수대로 형성이 되서
요로코롬 나오는걸 알수있다.(상품명을 나는 바꿨다.)
이제 장바구니에 Table cell란에다
+, - 버튼을 하나씩 만들어주자
우리는
"+버튼을 누르면 장바구니에 담긴게 하나 늘어나게 해주세요~"라고 하고싶다
그러면 그저 보이는것만 늘어나는게 아니라 저장된 데이터가 바뀌어야하니 state값이 바뀌어야한다
이제 다시 index.js로 돌아가서 수정방법을 정의하자
reducer(){} 라는 함수를 적고, 그안에 기존에 store안에 적어놓았던 데이터값을 옮겨놓자, 그리고 물론 store에서도 값을 쓸수있게 파라미터로 reducer를 받아오게 하면
이전과 똑같이 데이터를 퉤~ 하고 뱉어준다 하지만, 우리는 이렇게 쓰면 안되고
새로운 변수에 데이터값을 담아주고 시작한다.
reducer라는 함수는 항상 state값을 뱉어주어야한다
ES6 신문법인 default parameter 인데, = 등호를 뒤에 붙혀서
"내가 이 파라미터 자리(state)에 무언갈 입력하지 않으면 기본state를 넣어서 만들어주세요~"라고 하는거다,
이제 데이터는 넣어주었고! 수정하는 방법을 알아보자
잊지말자 reducer는 항상! state를 퉤 ! 뱉는거다
데이터 수정하는 방법은 if문을 써서
"만약에 이럴경우에는 수정된state를 return 해주시고~"
"아니면 기본state를 return 해주세요~" 라고 하면된다.
데이터 수정 조건을 if문 안에다가 적어주면 된다
여기에 있는 액션.type이 데이터가 수정되는 조건 이다
좀 더 쉽게 해석하면
액션.type 라는 조건이 '증가'했을때 실행해 주세요 라는거다
이제 버튼에서 저런 요청이 들어왔을 때 !
우리는 기존에 있던 데이터 자체를 수정하는게 아닌
카피본을 만들어서 state를 수정해야한다
if문 안에 let copy라고 변수를 만들어주고 state를 담자, 그다음
"copy안에 0번째 데이터에.quan을 ++ <- (그자리에서 1더해주세요) 해주세요~" 하는거다, 그리고 return copy <- 수정한 사본을 퉤 뱉어주세요~ 라고 쓴겁니다
이제 다시 cart.js로 돌아와서 버튼에 기능을 만들어보자
먼저 props로 데이터를 꺼내오자 ! 하지만 우린 무언갈 더 써야한다
dispatch()라는 함수인데 "무언가를 보내주세요~,전송해주세요~" 하는거다
이 안에는 오브젝트가 들어가고, 어떤 요청을 할 것인지 type를 적으면 된다
이렇게하면 수량을 늘리고 줄이는 기능의 버튼이 끝났다 !
감소하는 버튼도 살짝 만들어보자면
아까 만들어놓은 if문에 else if를 사용해서 -(마이너스)버튼을 만들어보자
+ 버튼 만들때랑 95% 똑같이 입력하면 된다 !
아 그리고 마지막에 else는 무조건 기본 디폴트값이라고 생각하고 꼭 넣어주자
장바구니 갯수가 음수로 계속 내려간다하면 조건문을 추가해서 막아주자 !
