주기 갱신이 지도를 초기화하지 않도록 갱신 출처를 구분한 처리

배정 화면은 「준실시간」 요구사항에 따라 30초마다 목록과 건수를 다시 조회했습니다.

지도에는 네이버 지도를 썼고, 마커 아이콘은 상태와 선택 여부에 따라 달라집니다. 선택한 마커는 앞으로 올리고 튀어 오르는 애니메이션을 주며, 이전에 선택한 마커는 원래 모습으로 되돌립니다. 지도를 처음 그릴 때는 모든 마커가 한 화면에 들어오도록 위치와 확대 수준을 맞춥니다.

데이터가 바뀔 때마다 지도 컴포넌트를 다시 마운트하면 지도 인스턴스를 새로 만들고, 마커 범위에 맞춰 화면 위치도 다시 잡습니다. 30초마다 이 과정이 반복되면 사용자가 옮겨 둔 위치와 확대 수준이 계속 처음 상태로 돌아갈 것으로 보고 미리 막기로 했습니다.

• isAutoFetching ref로 데이터가 어디서 바뀌었는지 구분했습니다.
• 자동 갱신으로 데이터가 바뀐 경우에는 지도의 mapKey를 올리지 않아 지도를 다시 마운트하지 않습니다.
• 사용자가 날짜나 탭을 바꾼 경우에는 지도를 다시 마운트해, 새 데이터 범위에 맞춰 화면을 다시 잡게 했습니다.

30초마다 데이터가 갱신돼도 지도 인스턴스와 사용자가 보고 있던 위치, 확대 수준은 그대로 유지됩니다. 지도를 새로 그리는 것은 사용자가 조건을 바꿨을 때뿐입니다.

다만 마커는 갱신 때마다 전부 지우고 다시 만드는 구조였습니다. 조회 결과가 매번 새 배열로 만들어져 데이터가 같아도 마커 처리가 다시 실행됐고, 이전 마커와 비교하는 로직도 없었습니다. 마커 하나를 선택할 때도 전체 마커를 다시 만들었습니다. 렌더링 차이는 측정하지 않았습니다.

지금 다시 만든다면 마커를 작업 번호를 키로 관리하겠습니다. 갱신 때 새 데이터와 비교해 새로 생긴 마커만 만들고, 사라진 마커만 지우고, 위치나 상태가 바뀐 마커만 고치는 방식입니다. 선택 처리도 목록 갱신과 분리해, 이전 선택과 새 선택 마커 두 개만 바꾸게 하겠습니다. 이렇게 바꾸면 마커 수가 많을 때 갱신 한 번에 걸리는 시간을 전후로 측정해 효과를 확인할 수 있습니다.