MutationObserver를 활용한 변화 감지

이미지 리스트의 변화를 감지하고 새로 추가된 이미지를 포함한 리스트를 다시 출력하려면 JavaScript의 MutationObserver 또는 리스트의 변화를 감지할 수 있는 리스트 갱신 함수를 활용할 수 있습니다. 아래 방법 중 상황에 맞는 것을 사용하시면 됩니다.

방법 1: MutationObserver를 활용한 변화 감지

HTML 요소 내에서 이미지 리스트가 동적으로 추가될 때 사용하면 좋습니다.

 

• observer.observe()에서 childList: true 옵션으로 자식 요소(이미지)가 추가되거나 제거될 때마다 MutationObserver가 트리거됩니다.
• addImage() 함수를 통해 이미지가 추가되면 MutationObserver가 감지하고 업데이트된 리스트를 출력합니다.

 

// 이미지 리스트 요소 선택 (예: <ul id="imageList">)
const imageList = document.getElementById("imageList");

// MutationObserver 설정
const observer = new MutationObserver(() => {
    // 리스트가 변경되었을 때 실행할 코드
    const images = Array.from(imageList.children).map(child => child.src);  // 예: 이미지 경로 리스트
    console.log("Updated Image List:", images);
    // 이미지 리스트 출력 로직 추가
});

// 이미지 리스트에 변화를 감지하도록 설정
observer.observe(imageList, { childList: true });  // 자식 노드 변화를 감지

// 이미지 추가 예시
function addImage(url) {
    const img = document.createElement("img");
    img.src = url;
    imageList.appendChild(img);
}

방법 2: 배열 기반 이미지 리스트 감지 및 재출력

리스트가 배열로 관리된다면 push() 후 리스트 변화를 감지해 처리할 수 있습니다.

let images = [];  // 이미지 경로를 저장하는 배열

function addImage(url) {
    images.push(url);
    updateImageList();
}

// 이미지 리스트 업데이트 함수
function updateImageList() {
    console.log("Updated Image List:", images);
    // 이미지 리스트 출력 로직 작성
}

// 새 이미지 추가
addImage("newImage.jpg");  // 예시로 새 이미지 추가

• addImage() 함수로 새 이미지를 리스트에 추가하고, 리스트를 업데이트하여 출력합니다.
• 이 방법은 배열로 리스트를 관리할 때 유용하며, 이미지 추가 시 배열 변화를 반영하여 출력할 수 있습니다.

두 방법 중 상황에 따라 MutationObserver나 배열을 이용한 방식을 선택해 구현해 보세요.