좌석배치도

최근에 좌석배치도를 만드는 일이 있었다. 여기서 생긴 문제점은 층수까지 나뉜 좌석배치도인게 문제였다.

층들의 형태
  [{
    floor:0,
    row:5,
    col:4
  }]


좌석들의 형태
  [{
    col:0,
    row:0,
    floor:0,
    selected:true,
    id:0,
  }]

• 좌석들을 state로 만든 뒤, 선택했을 때 변경되어야 하는게 당연하지만 그게 문제였다.
  예시 상황으로 층이 3층까지 있고, 각각이 층의 좌석의 합이 300개가 넘어간다면,,,,? 총 900개가 될 것이고
  내가 선택한 층의좌석 하나를 변경하기 위해서는 선택한 층뿐만 아니라 전체인 900개의 좌석을 실행시켜 변경해야하는 것이었다.
  그래서 생각을 단순하게 했다.

✅ 해결

• 좌석들을 해당 층마다 생긴 것으로 묶어주었다.

[[1층의 좌석], [2층의 좌석], [3층의 좌석]]

그리고 state를 변경할 때, 현재 보고있는 층수를 배열의 idx값으로 사용하여 해결,,!

  setSeat((curSeat) => {
    const copyCurSeat = [...curSeat]; // [[1층], [2층], [3층]]
    copyCurSeat[curFloor] = copyCurSeat[curFloor].map((seat) => ({
      ...seat,
      selected: seat.id === id ? true : false,
    }));

    return copyCurSeat;
  });

여기서 당연한 전제조건은 층을 기반으로 좌석을 만든다는 것이었다. 그렇게 하지 않으면, 층이 없는데 좌석만 있을 수 있기 때문에
층의 length와 좌석의 length는 항상 같게끔 했다.