Normalized State Design 기반의 고성능 Drag & Drop Kanban Board 구현

Context

중첩된 데이터 구조로 인한 업데이트 복잡도와 렌더링 성능 저하 가능성을 해결해야 하는 상황. 다수의 Card와 Column 간의 잦은 위치 변경 시 발생하는 불필요한 Re-rendering 최소화가 설계의 핵심 과제.

Technical Solution

• State Normalization을 통한 데이터 구조 최적화로 Card와 Column을 분리하여 Record 형태로 관리하는 아키텍처 설계
• HTML5 Drag and Drop API를 활용하여 외부 라이브러리 의존성을 제거한 경량 상태 전이 로직 구현
• cardIds 배열 내 ID 순서만 변경하는 방식으로 데이터 무결성을 유지하며 O(1)에 가까운 Card 조회 성능 확보
• useRef를 통한 draggingCardId 관리로 불필요한 State 업데이트를 방지하여 드래그 앤 드롭 시의 프레임 드랍 방지
• LocalStorage 연동을 통한 Client-side Persistence 레이어 구축으로 새로고침 시에도 상태 유지 가능하도록 설계