reactleafletperformancerefactoringstate-management
[Pilot Test Analysis System] 지도 시각화 아키텍처 개편 및 상태 관리 최적화
• 2 min read
비대한 컴포넌트로 인해 저하된 유지보수성을 확보하고, 프론트엔드의 메모리 사용량을 줄이기 위해 지도 렌더링 아키텍처와 상태 관리 방식을 전면 리팩토링함.
[React / Hooks] 데이터 패칭 계층 분리 및 UI 상호작용(Interaction) 훅 모듈화
- 데이터 패칭 로직과 지도 UI 컴포넌트가 강하게 결합된 기존 구조를 분리함.
useMapData훅을 신설하여 공간 데이터 패칭 및 HTTP 에러 핸들링을 전담하도록 추상화함.- 복잡한 줌(Zoom) 및 마우스 인터랙션 로직을
useChartInteraction훅으로 분리하고, 하드코딩된 라벨링 매핑 정보를constants.tsx로 중앙 집중화함.
[Frontend / Map Engine] 독립적 렌더링 계층 구성 및 조건부 다이나믹 마커 적용
- 단일 레이어 렌더링 책임을 분할하여
SchoolZoneLayer,HotspotLayer,IndividualAccidentLayer등 독립적인 컴포넌트로 구성함. - 스쿨존 영역 내 특정 줌 레벨 도달 시 커스텀 CSS 마커와 팝업이 렌더링되도록 구현하고, 주야간 시간대 데이터를 직관적인 아이콘(태양, 초승달)으로 표기함.
- 사고 다발지 및 개별 사고 마커에 대해 위험도 40 이상 및 다중 사고 발생 조건을 적용하고, 사망자 등 중대 지표 발생 시 조건부 스타일링(적색 텍스트 표출)을 연동함.
[React / Architecture] 클라이언트 파생 상태 제거 및 백엔드 기반 쿼리 위임 최적화
- 클라이언트 단에서
useMemo를 통해 전체 데이터를 지역별로 필터링하던 메모리 집약적 로직을 걷어냄. - 필터 조건 변경 시 백엔드 쿼리 파라미터를 활용해 필요한 JSON 응답만 수신하도록 통신 아키텍처를 변경함.
- 정렬 로직 등 데이터 가공 책임을 백엔드로 위임하여 클라이언트의 렌더링 사이클 횟수 및 CPU 연산 부하를 최소화함.