주제 선정

• 목적: 게시판, 갤러리 등에 다양한 기능 구현
• 선택 기능: 무한 스크롤
• 배경
  • 일반 스크롤 방식의 문제: 하단으로 갈수록 렌더링 속도 저하
  • 해결 방안: Intersection Observer API 사용

Intersection Observer API 옵션

1. root
   • 정의: 교차 영역 계산의 기준이 되는 요소
   • 예시: document.querySelector(".scrollerFooter")
2. rootMargin
   • 정의: 루트 바운딩 박스에 적용할 오프셋
   • 특징: 감지 시점 조절 가능
   • 기본값: 0px 0px 0px 0px
   • 단위: 픽셀(px) 또는 퍼센트(%)
3. threshold
   • 정의: 교차 알림(콜백 호출) 발생 기준
   • 범위: 0 ~ 1
   • 기본값: 0

문제 상황

• 옵션 지정 후에도 원하는 결과 미출력
• 스크롤 하단 도달 시 새 데이터 미로딩
• 원인: 공통 레이아웃(Menu Bar, Side Bar, Footer Bar)으로 인한 정확한 스크롤 감지 실패

결과

• React에서의 해결 방안
  • useRef 사용: 감지할 요소 지정
• 구현 방법
  1. map 함수로 데이터 리스트 생성
  2. loaderRef를 리스트 외부에 별도 크기로 생성
• 효과: 정확한 스크롤 감지 및 무한 스크롤 구현 성공

<AlbumList>
  {items.map(item => (
    <Link key={item.ialbum} to={`/album/details/${item.ialbum}`}>
      <ul className="image-grid">
        <li className="image-item">
          <img
            height={400}
            src={`${host}${item.ialbum}/${item.albumPic}`}
            alt={item.albumTitle}
          />
        </li>
        <p>{item.albumTitle}</p>
      </ul>
    </Link>
  ))}
  {loading && <Loading className="loading" />}
  <div ref={loaderRef} />
</AlbumList>

<AlbumList>
  {items.map(item => (
    <Link
      key={item.ialbum}
      to={`/album/details/${item.ialbum}`}
    >
      <ul className="image-grid">
        <li className="image-item">
          <img
            height={400}
            src={`${host}${item.ialbum}/${item.albumPic}`}
            alt={item.albumTitle}
          />
        </li>
        <p>{item.albumTitle}</p>
      </ul>
    </Link>
  ))}
  {loading && <Loading className="loading" />}
  <div ref={loaderRef} style={{ height: "100px", margin: "20px" }}></div>
</AlbumList>