[JS] 3. 웹 페이지에 그림을 그릴 때

📌 기본 방식: 전체를 다시 그리기

• 그림을 그릴 때 기존 내용을 지우고 전체를 다시 그림.
• 데이터가 변경되면 다시 그려야 하므로 성능이 저하됨.

🔄 변경 사항만 반영하여 다시 그리기

🛠️ 변경 사항을 반영하는 과정

1. 데이터 변경 감지
• 변경 사항이 있을 때만 해당 부분을 다시 그림.
• 기존 방식보다 성능이 향상됨.

2. 변경 사항을 반영하기 위한 기존 데이터 활용
• 변경 사항을 확인하려면 기존 데이터 상태를 알고 있어야 함.
• 기존 데이터를 보존하면서 변경된 부분을 감지해야 함.

3. 변경 감지를 위한 원칙
• 기존 데이터를 변경하지 않고 유지 → 불변성 (Immutability) 원칙 준수
• 기존 데이터와 변경된 데이터를 비교하여 차이점을 추출.

4. 변경 사항만 반영하여 그림 갱신
• 전체를 다시 그리지 않고, 변동된 부분만 업데이트하여 성능 최적화.