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

최재원

Mar 31, 2025

Contents

📌 기본 방식: 전체를 다시 그리기 🔄 변경 사항만 반영하여 다시 그리기

데이터가 변경되었을 때, 변경된 데이터만 반영하여 효율적으로 화면에 그림을 그리는 방법을 정리한다.

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

그림을 그릴 때 기존 내용을 지우고 전체를 다시 그림.

데이터가 변경되면 다시 그려야 하므로 성능이 저하됨.

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

변경된 부분만 다시 그림으로써 성능을 최적화하는 방법.

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

데이터 변경 감지

변경 사항이 있을 때만 해당 부분을 다시 그림.

기존 방식보다 성능이 향상됨.

변경 사항을 반영하기 위한 기존 데이터 활용

변경 사항을 확인하려면 기존 데이터 상태를 알고 있어야 함.

기존 데이터를 보존하면서 변경된 부분을 감지해야 함.

변경 감지를 위한 원칙

기존 데이터를 변경하지 않고 유지 → 불변성 (Immutability) 원칙 준수

기존 데이터와 변경된 데이터를 비교하여 차이점을 추출.

변경 사항만 반영하여 그림 갱신

전체를 다시 그리지 않고, 변동된 부분만 업데이트하여 성능 최적화.

🚀 이 방식은 성능 최적화뿐만 아니라, 데이터 변경 추적 및 유지보수에도 용이하다.

최적화된 렌더링을 위해 변경 사항을 감지하고 효율적으로 반영하는 전략을 고려해야 한다.

내가 정리한 글

데이터가 변경 되어 변경된 데이터로 화면에 그림을 그릴 때

기본 : 그림 그릴 때 기본적으로 전부다 지우고 다시 그린다

데이터가 변경되면 다시 다 그린다 → 성능이 떨어진다

변경 사항만 확인 : 그림 그릴 때 변경 사항만 다시 그린다

데이터가 변경 될 때 변경 사항만 그린다 → 성능이 떨어지지 않는다
변경 사항을 확인 하려면 기존 데이터를 알고 있어야 한다
기존 데이터를 알려면 변경 사항이 있을 때 기존 데이터를 변경하면 안된다

기존 데이터를 변경하지 않아야 하는 것 → 불변성

기존 데이터와 변경된 데이터를 비교하여 변경 사항을 확인한다
변경 사항만 추가로 그린다

Contents

📌 기본 방식: 전체를 다시 그리기 🔄 변경 사항만 반영하여 다시 그리기

JavaScript

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

최재원

Mar 31, 2025

Contents

📌 기본 방식: 전체를 다시 그리기 🔄 변경 사항만 반영하여 다시 그리기

데이터가 변경되었을 때, 변경된 데이터만 반영하여 효율적으로 화면에 그림을 그리는 방법을 정리한다.

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

그림을 그릴 때 기존 내용을 지우고 전체를 다시 그림.

데이터가 변경되면 다시 그려야 하므로 성능이 저하됨.

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

변경된 부분만 다시 그림으로써 성능을 최적화하는 방법.

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

데이터 변경 감지

변경 사항이 있을 때만 해당 부분을 다시 그림.

기존 방식보다 성능이 향상됨.

변경 사항을 반영하기 위한 기존 데이터 활용

변경 사항을 확인하려면 기존 데이터 상태를 알고 있어야 함.

기존 데이터를 보존하면서 변경된 부분을 감지해야 함.

변경 감지를 위한 원칙

기존 데이터를 변경하지 않고 유지 → 불변성 (Immutability) 원칙 준수

기존 데이터와 변경된 데이터를 비교하여 차이점을 추출.

변경 사항만 반영하여 그림 갱신

전체를 다시 그리지 않고, 변동된 부분만 업데이트하여 성능 최적화.

🚀 이 방식은 성능 최적화뿐만 아니라, 데이터 변경 추적 및 유지보수에도 용이하다.

최적화된 렌더링을 위해 변경 사항을 감지하고 효율적으로 반영하는 전략을 고려해야 한다.

내가 정리한 글

데이터가 변경 되어 변경된 데이터로 화면에 그림을 그릴 때

기본 : 그림 그릴 때 기본적으로 전부다 지우고 다시 그린다

데이터가 변경되면 다시 다 그린다 → 성능이 떨어진다

변경 사항만 확인 : 그림 그릴 때 변경 사항만 다시 그린다

데이터가 변경 될 때 변경 사항만 그린다 → 성능이 떨어지지 않는다
변경 사항을 확인 하려면 기존 데이터를 알고 있어야 한다
기존 데이터를 알려면 변경 사항이 있을 때 기존 데이터를 변경하면 안된다

기존 데이터를 변경하지 않아야 하는 것 → 불변성

기존 데이터와 변경된 데이터를 비교하여 변경 사항을 확인한다
변경 사항만 추가로 그린다

Contents

📌 기본 방식: 전체를 다시 그리기 🔄 변경 사항만 반영하여 다시 그리기