[ React/KaKao Map ] Marker 동기화 처리

비동기처리(의존성 배열)가 너무 안 잡혀서, promise 결국 리팩토링을 했다.
LLMs가 React 철학을 들먹이며, 이건 promise로 처리할 수 없다.

강경하게 진행했지만,
결국 useEffect을 덕지 덕지 더불어 setTimeout을 붙여가면서 맞출려고 했으나

결국, 이게 문제라면 그냥 promise로 하자고 하여 진행하였다.

---

 

 

문제 상황

- 현상: 마커 클러스터가 표시되자마자 "반짝" 하고 사라짐

 

 

 

 

원인 분석

1. useEffect 간 Race Condition

clusterer.clear()가 두 번 연속 호출되며 마커가 사라졌습니다.

// ❌ 기존 코드
useEffect(() => {
  clustererRef.current.clear()
  markersRef.current = teaHouses.map(...)
  clustererRef.current.addMarkers(markersRef.current)
}, [teaHouses.length, isMapReady])

useEffect(() => {
  const visibleMarkers = markersRef.current.filter(...)
  clustererRef.current.clear() // ← 충돌 발생
  clustererRef.current.addMarkers(visibleMarkers)
}, [visibleRegions, isMapReady])

 

 

2. 의존성 배열 관리 부실

teaHouses.length만 추적하여, 배열 내용이 바뀌어도 업데이트가 안 됨.

// ❌ 길이만 추적
}, [teaHouses.length, isMapReady])

 

 

해결 방법

1. Promise 기반 명령형 아키텍처로 전환

React의 선언적 useEffect 구조 대신, async/await 기반 단일 업데이트 함수로 순서를 보장했습니다.

// ✅ 수정 코드
const performMapUpdate = useCallback(async () => {
  if (updatePending.current) return
  updatePending.current = true

  try {
    // Step 1: 마커 업데이트
    if (updateQueue.current.teaHouses) {
      await updateMarkers(updateQueue.current.teaHouses, mapRef.current!, clustererRef.current!)
    }

    // Step 2: 필터 적용
    applyRegionFilter(
      markersRef.current,
      updateQueue.current.visibleRegions ?? visibleRegions,
      clustererRef.current!
    )
  } finally {
    updatePending.current = false
    updateQueue.current = {}
  }
}, [updateMarkers, applyRegionFilter, visibleRegions])

 

2. 의존성 배열 수정

배열 전체를 감지하도록 변경.

// ✅ 배열 전체 추적
}, [teaHouses, isMapReady])

 

3. useEffect 단순화

이제는 업데이트 트리거 역할만 담당.

useEffect(() => {
  if (!isMapReady) return
  updateQueue.current.teaHouses = teaHouses
  performMapUpdate()
}, [teaHouses, isMapReady])

 

 

결과 비교

구분 Before After

실행 순서	불명확 (Race Condition)	Promise chain으로 순차 보장
clear 호출	2회 연속 발생	1회씩 안정적 실행
의존성 배열	teaHouses.length	teaHouses 전체
결과	마커 깜빡임, 데이터 누락	깜빡임 제거, 정상 업데이트

---

결론

• React의 useEffect 의존성 관리 미흡 + Race Condition이 문제의 근본 원인이었음
• Kakao Maps처럼 명령형 API는 Promise 기반 명령형 아키텍처로 다루는 것이 가장 안정적임
• 결과적으로 깜빡임 현상 완전히 제거, 성능과 유지보수성 모두 개선됨 ✅

 

처음에는 단순히 데이터 매칭 문제라고 생각했지만,
원인은 RuseEffect과 LLMs의 판단하는 React 철학의 선형과 KaKao Map API 의 명령형의 철학 충동