[TIL] 오늘의 개발일지

 

오늘은 숨니랑 만나서 하루종일 미니 플젝 완성을 해나갔던것 같다

(물론 관리자 페이지랑 개인 유저의 실시간 주문상태 확인하는 로직은 내일 해야함!!!)

 

---

 

오늘 기록하고 싶은 주문번호별로 화면에 그룹핑해서 보여주는 로직!!!!!!

 

서버에서 받아오는 orderUid들을 같은 것들은 묶어서 '주문 상태 변경' 버튼은 orderUid 당 각 하나만 보이도록 해야했는데

 

1. 먼저 서버에서 보내준 data를 Set을 이용하여, orderUid를 추출해냈다.

( Set을 사용한 이유? orderUid 별로 묶어주고 싶었으니, orderUid는 1개씩만 있어야 되니께 )

 

( 원리 설명 )

// { } 타입으로 담기는 ex: {1, 2, 3} Set의 값을

// data.map의 order x 끝까지 돌리고

// 그 {값,값,값,값}들이 담긴 {} object을 Set함수가 뱉어내는데

// 전개연산자(...)를 사용해서 그 {} 를 풀어헤치고

// 그걸 배열로 만들어준 것

const orderUidList = [...new Set(data.map((order) => order.orderUid))];

 

   * Set 함수 정리   

• set 객체는 중복되지 않는 유일한 값들의 집합이다.
• set 객체는 다음과 같은 특징을 가진다.
  1. 동일한 값을 중복하여 포함할수 없다
  2. 요소 순서에 의미가 없다
  3. 인덱스로 요소에 접근할 수 없다.

 

 

그렇게 Set을 통해 추출해낸 orderUidList 배열

const orderUidList = [1, 2, 3];

 

2. orderUid 별로 주문 정보를 묶어주기 ( orderUid가 같은 애들끼리 먼저 그룹핑 )

* orderUidList 별로 묶어줘야하니, data에 filter를 걸어서 orderUid가 일치하는 넘들끼리 그룹핑을 해줬다. 

const groupedData = orderUidList.map((orderUid) =>
  data.filter((order) => order.orderUid === orderUid)
);

 

 

1) 처음에 data.filter가 뱉어주는 애들이 배열인데 [ ], orderUid가 같은 애들끼리 묶인 배열들이 groupedData에 담길거!!!

// 이 data.filter가 뱉어낸게 배열이야 (order.orderUid랑 orderUid랑 일치하는)

// [{…}, {…}] : [{orderUid :3 name:1},{orderUid :3 name:2}]

 

2) 애초에 orderUidList의 개수만큼 map을 돌려줬으니, 젤 큰 껍데기 배열(?) [ ] 안에 data.filter가 뱉어준 중간따리 배열(?) [ ]들이 쫘라락 들어가있을거임

// map을 돌리면, orderUid의 개수만큼 들어있겠지 그럼 총 3개가 들어있을거고

// 0 : [{…}, {…}]

// 1 : [{…}, {…}]

// 2 : [{…}, {…}]

// 전체 모습을 보면, [ [{…}, {…}], [{…}, {…}] , [{…}, {…}] ]

// 요렇게 들어있겠지

// 그럼 화면에 뿌려줄땐?

// 첫번째 인덱스의 애들을 맵을 돌리기

 

 

결론적으로 이 groupedData의 구조는 아래처럼 들어가는 것 

const groupedData = [
  [
    { orderUid: 1, memberUid: 1, menuName: '아메리카노' },
    { orderUid: 1, memberUid: 2, menuName: '카페라떼' }
  ],
  [
    { orderUid: 2, memberUid: 3, menuName: '딸기주스' }
  ],
  [
    { orderUid: 3, memberUid: 2, menuName: '아메리카노' },
    { orderUid: 3, memberUid: 4, menuName: '카페라떼' }
  ]
];

 

화면에 뿌려줄땐 요런식으로 뿌려줬당

{groupedData.map((orders, index) => (
  <div key={index}>
    {orders.map((order) => (
      <div key={order.orderUid}>
        <div>주문번호: {order.orderUid}</div>
        <div>멤버번호: {order.memberUid}</div>
        <div>메뉴이름: {order.menuName}</div>
      </div>
    ))}
  </div>
))}