front에서 back으로 body값 전달 시(List 형태인 경우)

상황
매출 입력하려고 할 때, 사용자가 입력한 값을 back-end에 넘기려고 하는데,
상품명,수량,합계 금액은 단일값이 아니라, 복수형이라서 어떻게 보내야 될까?

 

 

 

해결법

1) 프론트에서 상품명+수량을 묶어서 백엔드에 전달 (묶어서 전달하지 않으면, 해당 상품명이 어떤 수량과 매칭이 되는지 알 수 없다)

   아래와 같이 salesDate 변수에 담아서 전달(=JSON 객체 생성)

const [menuCode, setMenuCode] = useState("");
const [salesCount, setSalesCount] = useState("");

  const salesData = {
      menuCode: menuCode,
      salesCount: parseInt(salesCount, 10), // 숫자 변환
    };
    
     <div>
        <label>Menu Code:</label>
        <input
          type="text"
          value={menuCode}
          onChange={(e) => setMenuCode(e.target.value)}
        />
      </div>
      <div>
        <label>Sales Count:</label>
        <input
          type="number"
          value={salesCount}
          onChange={(e) => setSalesCount(e.target.value)}
        />
      </div>

 

 

2) 그러면 백엔드에서는 이런식으로 전달 받게되고,

{
  "storeCode": 101,
  "salesDate": "2024-11-21",
  "menuSalesList": [
    { "menuName": "콜라", "salesCount": 10 },
    { "menuName": "사이다", "salesCount": 5 },
    { "menuName": "환타", "salesCount": 8 }
  ],
  "salesStatus": 1
}

 

 

3) menuSalesList의 값들을 하나씩 [ ]에서 빼와서, DB에 저장하기

    Auto Increment인   "salesNum": 1, 값은 자동으로 증가하게 되고,

   "salesNum": 1,  "menuName": "콜라", "salesCount": 10, ...그 외 필드

   "salesNum": 2,  "menuName": "사이다", "salesCount": 20, ...그 외 필드

 

이런식으로 DB에 저장하게 된다.

 

++ 추가로

 

DTO 형식은 여러개를 받는 값들은 리스트 형식으로 설정하기.

	private List<String> menuNameList;
	private List<Integer> salesCount;

 

 

<완료>