이번 테스트를 바라보며 느낀 점

 

나는 오늘           1.   사용자의 상품 데이터를 받아와서  나타내기         2.   사용자의 상품 데이터가  개수가 추가된 것을  cart 라는 페이지에  보여주기          3.   사용자가  선택한 상품 데이터의 총합을  보여주기     이렇게  조건이  주어진 채로  내가  공부를  잘하고 있는지 테스트를 하였다.

 

 

1  사용자의  상품  데이터를 받아와서 나타내기 

 

사용자의 상품 데이터를  dummy 라는  변수에 집어넣었습니다.

데이터에 대해서 설명하자면  id  :  상품 식별 id값  name : 상품 이름 price : 상품 금액 count :  사용자가 몇개를 선택했는가?

 

 

우리가  리액트에서  state는  변하는 값을  저장할때 사용한다고 했습니다.  그러면  dummy도   state 로 관리하는게 나을까요 ?  =>  정답은 ....  맞습니다.   왜냐하면  count 라는  사용자가 클릭한  개수가   증가하거나 감소할수도 있잖아요. 그래서  필요합니다. 그래서!!! 다음과  같이 하였습니다.

product 는  변하는  값들을  저장해놓은  변수입니다.  

setProduct 는  사용자가 클릭한 개수의 증가와 감소를 저장할 때 사용하는  함수입니다. 

 

이제 데이터를 보여줍시다.

 {product.map((data) => (
        <div key={data.id}>
          <h1>{data.name}</h1>
          <p>{data.price}</p>
          <p>{data.count}</p>
 ))}

  여기서  map은  product 배열에 있는  객체 데이터를  순서대로 뽑아서  jsx 형식 으로  나타내주는  역활을 합니다.  

 

 

---

  

 

2.   사용자의 상품 데이터가  개수가 추가된 것을  Cart 라는 페이지에  보여주기 

 

개수 추가라.....  data.count 가 바뀌는  것이죠  그러니 일단  이렇게  코드를 작성해봅시다.

   state의 전체 데이터 가져오고 -> A
   
   내가 선택할 식별자 값 -> B 
   
   A.map((data) => {
   
   // 아 이렇게 안하면 전체 데이터가 수정될수도 있습니다.
   // 우리는 상품1의 숫자를 0...1...2 이렇게 가지고 가고 싶은 사람이 있다면 
   if(data.id === B  ){
      
      // 상품의 데이터를 뽑아옵니다. 거기에서 개수부분만 변경되겠죠
      return  {...data , count : data.count +1 } 
   }else{
       // if가 false라면  변경하지마!!!!
       return data;
   }
   
   
   })

 

그러면  감소도 똑같습니다. 

 

data.count - 1 로 바꾸기만 하면 됩니다. 

그리고 리액트는  상태 변화에 따라 렌더링을 해주므로  setProduct 에 알려야합니다~~

  

 

그리고  우리가 상식적으로  상품의 개수가 -1개는 없잖아요  그러면 이렇게 합시다.

<button disabled={data.count <= 0}> - </button>

<!-- 만약에 = 를 지우면 -1이 된채로 멈추는데 이것은 -1개가 저장됩니다.  -->
<button disabled={data.count < 0}> - </button>

  

그러면  다음 화면에서  버튼이  비활성화 되겠지요 

 

 

 

 

 

3.  사용자의  선택한  데이터들의  총합을 보여주려면 ..... 뭐가 쓰일까? 

 

   변수  = 상품의 비용 * 상품 클릭한 개수 + 상품의 비용 * 상품 클릭한 개수 +  ........ 
  
   {변수}
   
   
  const totalPrice = cart.reduce(
    (acc, curr) => acc + curr.price * curr.count,
    0
  );
  
  reduce라는 배열 메서드에서 답을 얻을수 있었습니다. 
  
  acc + ( 상품의 가격 * 사용자가 상품을 선택한 개수 ) + ...... (상품n의 가격 * 사용자가 상품을 선택한 개수n)
  
  0 + 곱한값1 + ..... + 곱한값n

 

 

 

저는  3번  reduce 와 같은  배열 메서드나 
그 외 메서드를  좀 더 공부를  해야겠다고
느꼈습니다....