[React] 상세 페이지에 재고 데이터 표시하기

💡 실습 포인트!

• 오늘은 상세 페이지에 재고 데이터를 표시해보았다.
• 뿐만 아니라 재고 데이터는 주문 및 주문취소의 수에 따라 개수가 유동적으로 변하므로, 이와 유사하게 "주문하기" 버튼을 눌렀을 때 재고 데이터가 감소하도록 구현해보았다.

---

💜 상세 페이지에 재고 데이터 표시하기

• 상세 페이지의 "주문하기", "뒤로가기" 버튼 위에 재고 데이터를 표시하기로 했다.

🤍 재고 데이터를 저장할 state 만들기

let [leftAll, setLeftAll] = useState([10, 11, 12]);

• DB 를 이용해서 구현하는 게 아니기 때문에 최상위 파일인 App.js 파일에 임의로 0번 상품, 1번 상품, 2번 상품의 재고 데이터 array 를 leftAll 이라는 state 에 저장해주었다.

---

🤍 만들어놓은 state 를 Component 로 전송하기

<Route path='/detail/:id'>
	<Detail shoes={shoes} setShoes={setShoes} leftAll={leftAll} setLeftAll={setLeftAll}/>
</Route>

• 이제 만들어놓은 state 를 Detail Component 로 보내주면 된다.
• 나는 위와 같이 leftAll 이라는 state 는 leftAll 이라는 변수명으로, setLeftAll 이라는 state 는 setLeftAll 이라는 변수명으로 전송해주었다.
• 이제 Detail Component 에서 props 로 받아와서 leftAll 과 setLeftAll 이라는 이름의 state 를 사용할 수 있다.

---

🤍 재고 데이터 Component 만든 후 html 태그에 추가하기

// 전체 코드 미리보기
// 코드 내용이 너무 길어 불필요한 부분은 제외했다.

function LeftInfo(props) {
  return (
    <p> 재고 : {props.leftOne}</p>
  )
}

function Detail(props) {

  let findId = props.shoes.find(function(item) {
      return item.id === parseInt(id);
  });
 
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-7">
          <img src={`https://codingapple1.github.io/shop/shoes${parseInt(findId.id)+1}.jpg`} width="100%">
        </div>
        <div className="col-md-5 mt-4">
          <h4 className="pt-5">{findId.title}</h4>
          <p>{findId.content}</p>
          <p>{findId.price}</p>
          <LeftInfo leftOne={props.leftAll[findId.id]}/>
          <button className="btn btn-danger mx-1">주문하기</button> 
          <button className="btn btn-danger mx-1" onClick={()=>{history.goBack()}}>뒤로가기</button> 
        </div>
      </div>
    </div>
  )
}

 

<LeftInfo leftOne={props.leftAll[findId.id]}/>

• 일단 LeftInfo 라는 이름으로 Components 를 만들어줄 거기 때문에 "주문하기" 버튼 태그 윗부분에 위와 같이 코드를 작성해주었다.
• 기존에 leftAll 에 저장된 데이터는 [10, 11, 12] 라는 array 형태의 자료형이기 때문에 0번 상품의 상세 페이지라면 leftAll[0], 1번 상품의 상세 페이지라면 leftAll[1] 이런 식으로 가져와야 재고 수량을 보여줄 수 있다.
• 따라서 props.leftAll[findId.id] 를 leftOne 이라는 변수명으로 LeftInfo Components 에 전송해주었다.

 

function LeftInfo(props) {
  return (
    <p> 재고 : {props.leftOne}</p>
  )
}

• 그러고 나서 LeftInfo Component 에서 props 로 leftOne 을 받아 위와 같이 코드를 작성해주었다.
• 여기까지만 하면 0번 상품, 1번 상품, 2번 상품의 상세 페이지에 들어갔을 때 각각의 재고 데이터를 확인할 수 있다.

---

💜 "주문하기" 버튼을 누르면 재고 데이터 감소하도록 만들기

• 재고 데이터는 주문 및 주문취소에 따라 개수가 변한다.
• 그래서 이번에는 "주문하기" 버튼을 누르면 재고 데이터가 하나씩 감소하도록 기능을 만들어보았다.

// 전체 코드 미리보기
// 코드 내용이 너무 길어 불필요한 부분은 제외했다.

function LeftInfo(props) {
  return (
    <p> 재고 : {props.leftOne}</p>
  )
}

function changeLeftAll(props, id) {
  let newLeftAll = [...props.leftAll];
  newLeftAll[id] = props.leftAll[id] - 1;
  props.setLeftAll(newLeftAll);
}

function Detail(props) {

  let findId = props.shoes.find(function(item) {
      return item.id === parseInt(id);
  });
 
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-7">
          <img src={`https://codingapple1.github.io/shop/shoes${parseInt(findId.id)+1}.jpg`} width="100%">
        </div>
        <div className="col-md-5 mt-4">
          <h4 className="pt-5">{findId.title}</h4>
          <p>{findId.content}</p>
          <p>{findId.price}</p>
          <LeftInfo leftOne={props.leftAll[findId.id]}/>
          <button className="btn btn-danger mx-1" onClick={()=>{changeLeftAll(props, findId.id)}}>주문하기</button> 
          <button className="btn btn-danger mx-1" onClick={()=>{history.goBack()}}>뒤로가기</button> 
        </div>
      </div>
    </div>
  )
}

• 예를 들어, 0번 상품의 상세 페이지에서 "주문하기" 버튼을 누르면 0번 재고 데이터에 해당하는 10이라는 숫자가 9로 바뀌어야 한다.
• 즉, leftAll 이라는 state 가 [10, 11, 12] 에서 [9, 11, 12] 로 변해야 한다. 
• 이런식으로 array 형태의 state 를 바꾸는 방법은 이전에 여러 번 구현했기 때문에 어렵지 않았다.

 

<button className="btn btn-danger mx-1" onClick={()=>{changeLeftAll(props, findId.id)}}>주문하기</button>

• 먼저 함수명부터 changeLeftAll 이라고 정해주었다.
• leftAll 과 setLeftAll 이라는 state 를 사용해야 하므로 props 를 받아올 수 있도록 해주었다.
• 또한 몇 번 상품의 상세 페이지냐에 따라 leftAll 에서 수정해야할 데이터의 인덱스가 달라지므로 상품 번호에 해당하는 findId.id 도 파라미터로 받아올 수 있도록 해주었다.

 

function changeLeftAll(props, id) {
  let newLeftAll = [...props.leftAll];
  newLeftAll[id] = props.leftAll[id] - 1;
  props.setLeftAll(newLeftAll);
}

• 원본 array 를 그대로 사용하면 안 되기 때문에 먼저 props 로 받아온 leftAll 이라는 state 의 사본 array 를 만들어서 newLeftAll 이라는 변수에 할당해주었다.
• 그리고 newLeftAll array 내에 있는 데이터들 중에 id 와 일치하는 인덱스의 값에서 -1 해주어야 하므로, newLeftAll[id] = props.leftAll[id] - 1; 이라고 코드를 작성해주었다.
• 이제 newLeftAll 에는 현재 상세페이지의 재고 데이터가 1개 감소된 array 형태의 데이터들이 저장되고, 이를 setLeftAll() 에 넣어주면 최종적으로 leftAll 이라는 state 가 수정된다.