카테고리 없음

✨ 여러 요소 관찰 방법

lamarcK 2025. 3. 31. 12:08

그렇다면 질문이다. 해당 코드에서는 인터섹션 옵저버 기능은 observer.observe(loader);

loader 부분만 있어서 사실상 entry가 loader하나로 보인다. 그럼 이걸 작동하게 하려면

observer.observe(loader)

observer.observe(loader02)

같이 인식되는 요소를 계속 불러줘야하는가? 아니면

const loader = document.getElementById('loader'); 같은 방식이 아닌 아예 배열에 할당해버려야 하는가?

맞다. 현재 코드에서는 observer.observe(loader);만 호출했기 때문에, handle 콜백 함수가 받는 entries 배열에는 오직 loader 요소의 상태 변경 정보만 (해당 이벤트가 발생했을 때) 담겨 오게 된다. 그래서 entries[0] (또는 forEach의 첫 entry)가 loader에 대한 정보일 가능성이 매우 높다.

그렇다면 여러 요소를 관찰하고 싶을 때 어떻게 해야 할까? 사용자가 제시한 두 가지 아이디어를 살펴보자.

⚙️ 방법 1: observe() 반복 호출 (권장)

observer.observe(loader) observer.observe(loader02) 같으 인식되는 요소를 계속 불러줘야하는가?

 

그렇다, 이것이 바로 여러 요소를 하나의 옵저버로 관찰하는 올바른 방법이다!

하나의 IntersectionObserver 인스턴스(observer)는 여러 개의 다른 DOM 요소를 독립적으로 관찰 목록에 추가할 수 있다.

// 1. 옵저버 생성 (옵션은 하나)
const options = { /* ... */ };
const observer = new IntersectionObserver(handle, options);

// 2. 관찰할 요소들 가져오기
const loader = document.getElementById('loader');
const section1 = document.getElementById('section-1');
const footer = document.querySelector('footer');
const specialImage = document.querySelector('.special-image');

// 3. 각 요소를 observer에 등록 (observe() 메소드 반복 호출)
observer.observe(loader);
observer.observe(section1);
observer.observe(footer);
observer.observe(specialImage);

이렇게 하면, observer는 loader, section1, footer, specialImage 모두를 동시에 감시한다. 이들 중 어떤 요소라도 교차 상태가 변경되면 동일한 handle 콜백 함수가 호출되고, entries 배열에는 상태가 변경된 모든 요소에 대한 IntersectionObserverEntry 객체들이 담겨 온다.

⚙️ 방법 2: 요소 목록 가져와서 반복 호출

아니면 const loader = document.getElementById('loader'); 같은 방식이 아닌 아예 배열에 할당해버려야 하는가?

이 질문은 요소를 가져오는 방식과 옵저버에 등록하는 방식을 약간 혼동한 것일 수 있다. 하지만 여러 요소를 효율적으로 가져와서 한 번에 등록하는 아이디어는 매우 일반적이다.

  1. 요소 목록 가져오기: querySelectorAll() 과 같은 메소드를 사용하면 특정 조건(예: 같은 클래스 이름)을 만족하는 여러 요소를 한 번에 NodeList (배열과 유사하게 사용 가능) 형태로 가져올 수 있다. 
    // 예시: 'watch-me' 클래스를 가진 모든 요소를 가져옴
const elementsToWatch = document.querySelectorAll('.watch-me');
  2. 가져온 목록을 순회하며 observe() 호출: NodeList나 배열을 반복문(예: forEach)으로 순회하면서 각 요소를 observer.observe() 메소드를 통해 등록한다. observe() 메소드 자체에 배열을 직접 전달할 수는 없다. 
    // 1. 옵저버 생성
const options = { /* ... */ };
const observer = new IntersectionObserver(handle, options);

// 2. 관찰할 요소 목록 가져오기
const elementsToWatch = document.querySelectorAll('.watch-me');

// 3. 각 요소를 반복하며 옵저버에 등록
elementsToWatch.forEach(element => {
  observer.observe(element); // 각 요소를 개별적으로 observe() 해야 함
});

결론: 요소를 배열(또는 NodeList)에 담는 것은 요소들을 효율적으로 관리하고 참조하기 위한 좋은 방법이지만, 옵저버에게 "이 요소들을 관찰해줘"라고 알리는 작업은 결국 각 요소를 개별적으로 observer.observe(element)를 통해 등록해야 한다. 방법 2는 사실상 방법 1을 반복문으로 자동화하는 방식이다.

💡 요약

  • 하나의 IntersectionObserver 인스턴스로 여러 개의 요소를 관찰할 수 있다.
  • 각 요소를 관찰 목록에 추가하려면 observer.observe(해당요소)를 요소마다 호출해주어야 한다.
  • querySelectorAll 등으로 여러 요소를 한 번에 가져와 배열이나 NodeList로 만든 뒤, forEach와 같은 반복문을 사용하여 각 요소를 observer.observe()로 등록하는 것이 일반적인 패턴이다.
  • observe() 메소드 자체에 요소의 배열을 직접 전달할 수는 없다.