피드로 돌아가기
Dev.toFrontend
원문 읽기
createPortal 기반 React-Mapbox GL JS 상태 동기화 설계
React + Mapbox GL JS: Custom Markers, Popups, and Bounds-Based Data Fetching
AI 요약
Context
Mapbox GL JS의 명령형 DOM 관리 방식과 React의 선언적 Virtual DOM 간의 제어권 충돌 발생. 특히 Marker와 Popup 같은 요소들의 생명주기를 React 상태와 연동하는 과정에서 아키텍처적 불일치로 인한 구현 난이도 증가.
Technical Solution
- React Component 내부에 Marker 생명주기를 위임하여 선언적 UI 관리 구조 설계
- createPortal을 활용해 React JSX 콘텐츠를 Mapbox가 관리하는 DOM 노드에 주입하는 브릿지 패턴 적용
- map.getBounds()를 통한 현재 뷰포트 좌표 추출 및 API 쿼리 파라미터 연동으로 데이터 페칭 최적화
- moveend 이벤트 리스너와 useCallback을 결합하여 불필요한 리렌더링 방지 및 실시간 데이터 갱신 구현
- Map instance의 존재 여부를 가드 조건으로 설정하여 초기 렌더링 시의 undefined 참조 오류 제거
실천 포인트
- 외부 라이브러리의 명령형 DOM 조작 시 createPortal을 통한 제어권 분리 검토 - 대량의 지리 데이터 처리 시 전체 페칭 대신 Viewport Bounds 기반의 부분 페칭 전략 적용 - Mapbox 이벤트 핸들러 등록 시 함수 재생성으로 인한 메모리 누수 방지를 위해 useCallback 사용