React로 Bubble Sort Visualizer를 만든 방법 — 애니메이션 라이브러리 없이

Source: Dev.to

Motivation

시니어 React 개발자로서 알고리즘 시각화를 수십 개 만들었습니다. 대부분의 설명은 최종 결과만 보여주는 정적인 다이어그램을 사용해 각 단계에서 무슨 일이 일어나는지 추측하게 만들죠. 저는 이를 바꾸고 싶었습니다—외부 애니메이션 라이브러리 없이도 실시간으로 알고리즘이 작동하는 모습을 보고 싶었습니다.

Implementation

시각화 도구는 순수 React 함수형 컴포넌트로 구현되었습니다:

• useState를 사용해 애니메이션 상태 관리
• useRef를 사용해 타임아웃 관리
• CSS‑in‑JS 인라인 스타일

핵심 아이디어는 모든 애니메이션 단계를 미리 계산해 두고, 간단한 타임아웃 루프로 재생하는 것입니다.

bubbleSort function

function bubbleSort(array) {
  const arr = [...array];
  const steps = [];

  for (let i = 0; i  arr[j + 1]) {
        // Perform the swap
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        // Record the state after the swap
        steps.push({
          arr: [...arr],
          comparing: [j, j + 1]
        });
      }
    }
  }
  return steps;
}

Replaying the steps

steps.forEach((step, index) => {
  setTimeout(() => {
    setArray(step.arr);
    setComparing(step.comparing);
  }, index * 120); // 120 ms between frames
});

Visual Legend

• 🟣 Purple – 정렬되지 않은 요소
• 🔴 Red – 현재 비교 중인 요소
• 🩵 Cyan – 완전히 정렬된 요소

이 색상 덕분에 배열의 어느 부분이 아직 처리 중이고 어느 부분이 이미 정렬됐는지 즉시 파악할 수 있습니다.

What’s Next

다음 알고리즘 및 자료구조에 대한 시각화를 계획하고 있습니다:

• Binary Search
• Merge Sort
• Quick Sort
• Dijkstra’s Algorithm
• Binary Search Trees
• Hash Tables

React 개발자이시고 더 나은 애니메이션 패턴에 대한 아이디어, 다음 알고리즘에 대한 제안, 혹은 성능 팁이 있다면 아래 댓글로 자유롭게 남겨 주세요!