외부 라이브러리 없이 React 상태 관리만으로 구현한 알고리즘 시각화 엔진

Context

정적 다이어그램과 코드 위주의 알고리즘 설명 방식이 가진 시각적 전달력 한계 인지. 복잡한 애니메이션 라이브러리 의존성을 배제한 순수 React 기반의 직관적인 시각화 도구 필요성 대두.

Technical Solution

• 알고리즘 실행 과정의 모든 상태 변화를 steps 배열에 사전 기록하는 Snapshot 방식 채택
• setTimeout의 인덱스 기반 지연 시간 설정을 통한 순차적 상태 재생 구조 설계
• useState를 활용한 배열 상태 동기화 및 useRef 기반의 타이머 관리 체계 구축
• CSS-in-JS 인라인 스타일을 통한 요소별 실시간 색상 매핑 및 시각적 피드백 구현
• 배열 복사(...array)를 통한 불변성 유지로 각 스텝의 독립적인 상태 스냅샷 보장