231030 [Day30] VanillaJS를 통한 자바스크립트 기본 역량 강화 Ⅱ(2)

무한 스크롤 UI 구현하기

 

무한 스크롤이란? 

• 컨텐츠를 페이징 하는 기법 중 하나
• 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식
  • 인스타그램, 트위터, 페이스북 같은 sns에서 주로 사용

 

구현 방식 (2가지)

• window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식
• intersection observer 방식 : 브라우저 뷰포트(Viewport)와 원하는 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 아닌지 구별하는 기능을 제공한다. (더 쉽게는 특정 요소가 사용자 화면에 보이는지 안보이는지 판단함)

 

상황에 따라 무한 스크롤 UI 보다는 직접 더 불러오는 인터랙션(버튼 클릭..)을 통해 로딩하는 게 나을 수도 있다.

 

 

오늘 구현할 컴포넌트 구조

 

             photoList

App ------------------- photoList

          onScrollEnded

 

app컴포넌트에서 데이터를 불러오고 포토리스트 컴포넌트를 생성, 불러온 데이터를 포토리스트라는 이름으로 내려줄 것이다.

포토리스트 컴포넌트에서는 화면에서 스크롤에 거의 다 닿았으면 onscrollended 콜백을 호출하여 app컴포넌트로 넘긴다.(데이터를 다시 더 불러오게 됨)

 

 

⭐️ 알게된 것

 this.render = () => {
        console.log(this.state)
        $photoList.innerHTML = `
            ${this.state.map(photo => {
                `
                <li>
                    <img width="100%" src="${photo.imagePath} />
                </li>
                `
            }).join('')} 
        
        `
    }
    //return 키워드가 없어서 렌더링이 안됨.
    //함수 블럭에서는 return 키워드를 넣어야한다. {} 지우면 해결가능!!

✨

 this.render = () => {
        console.log(this.state)
        $photoList.innerHTML = `
            ${this.state.map(photo => 
                `
                <li>
                    <img width="100%" src="${photo.imagePath} />
                </li>
                `
            ).join('')}
        
        `
    }

 

쓰로틀링(throttling)과 디바운싱(debouncing)

• 쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

 

쓰로틀링

스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생한다.

scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 엄청 렉이 걸릴 것이다.

그럴 때 쓰로틀링을 걸어준다. 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 둔다.

 

 

Intersection Observer

observe(감시), unobserve를 잘 해야함

threshold 값으로 observe 대상이 얼마나 노출되어있는지에 따라 동작하게 할 수 있다.

 

Intersection Observer 사용 방법

Intersection Observer API는 다음과 같은 상황에 콜백 함수를 호출한다:

• 대상(target) 요소가 기기 뷰포트나 특정 요소(이 API에서 이를 root 요소 혹은 root로 칭함)와 교차할 때
• 관찰자(observer)가 최초로 타겟을 관측하도록 요청받을 때

 

 

기본 문법

Intersection Observer는 new IntersectionObserver() 생성자를 통해 인스턴스 (io)를 만든다.

그리고 해당 인스턴스로 관찰자 (Observser)를 초기화하고 관찰할 대상을 지정한다.
이때, new IntersectionObserver() 생성자는 2개의 인수 (callback, options)를 갖는다.

let io = new IntersectionObserver(callback, options); // observer 초기화

io.observe(element) // 관찰 대상 등록

 

 

Callback

콜백은 관찰할 대상 (target)이 등록되거나, 가시성(visibility: 해당 요소가 뷰포트 혹은 특정 요소에서 보이거나 보이지 않을 때)에 변화가 생기면 실행된다.

콜백은 2개의 인수(entries, observer)를 갖는다.

const io = new IntersectionObserver((entries, observer) => {}, options)
io.observe(element)