좌석 선택 UI 프론트엔드 엔지니어
목록을 정렬했더니 왜 내가 고른 좌석과 메모가 다른 줄에 붙을까요?
React의 상태 스냅샷·업데이터 함수, 리스트 key 식별, 그리고 서버가 최종 확정하는 좌석 점유 권한을 구분해 설계합니다.
상황 배경
예매 화면에서 원하는 좌석들을 고르고 좌석마다 메모를 남긴 뒤 목록을 가격순으로 다시 정렬할 수 있습니다. 정렬 후에도 선택한 좌석과 입력한 메모가 원래 좌석에 그대로 유지되어야 하며, 실제 좌석 선점 여부는 서버를 통해 확정됩니다.
설계 제약 조건
- 각 좌석은 고유한 seatId로 식별합니다.
- 한 이벤트 안에서 좌석 선택 상태를 연속으로 업데이트해도 앞선 선택이 유실되지 않아야 합니다.
- 목록 정렬 순서가 바뀌어도 각 행 내부의 상태가 다른 좌석으로 섞이면 안 됩니다.
- 클라이언트 화면에서 좌석을 클릭한 것만으로 예매가 최종 확정된 것처럼 표시하지 않습니다.
각 선택지의 예상 결과와 트레이드오프를 비교하는 설계 연습 시나리오입니다. 서비스 요구사항에 따라 다른 선택도 가능하며, 연결된 코드 실습은 아래 링크에서 바로 실행해 볼 수 있습니다.
질문 1 / 3
선택 좌석 상태를 연속으로 업데이트할 때
연속 좌석 추천 버튼을 눌렀을 때 한 이벤트 흐름 안에서 좌석 추가 업데이트가 여러 번 호출됩니다. 현재 렌더링의 상태 값은 고정된 스냅샷입니다.
기존 선택 목록에 여러 좌석을 안전하게 연속 추가하려면?
1 / 3