[TIL] Today I Learned #7 (2022.05.11)

Intersection Observer Api를 쓸꺼다.

• Target 요소가 특정 영역에 교차할 때 마다 비동기로 이벤트를 발생시킨다. 메인스레드에 부하를 주지 않는다.
• threshold :
  -> 콜백이 실행될 대상 요소의 가시성 퍼센티지.
  -> 기본값은 0, 범위는 0~1.0
  -> 0은 요소가 1px이라도 보이자마자 콜백을 실행한다.

동작 순서

1. Observer에서 감지된 Element를 포착
2. 화면에 표시된 경우를 체크해 page 값 증가
3. page State 변경이 이루어지면 useEffect()에서 getAPI() 실행
4. 로딩 시작 -> 데이터 추가 성공 -> 로딩 종료