2024.03.05(화)

🍞토스트

관련 PR 바로가기

🖼️모달

관련 PR 바로가기

🌀createPortal API

일부 자식을 DOM의 다른 부분으로 렌더링

createPortal(children, domNode, key?)

• 파라미터
  • children: React로 렌더링할 수 있는 모든 것
  • domNode: 이미 존재하고 있는 DOM node
  • key (optional): 포털의 key로 사용할 고유 문자열 또는 숫자
• 반환값
  • JSX에 포함되거나 React 컴포넌트에서 반환될 수 있는 React 노드 → React가 렌더링 출력물에서 이를 발견하면, 제공된 children을 제공된 domNode 안에 배치
• 모달을 불러오는 component가 overflow: hidden 또는 모달을 방해하는 다른 스타일이 있는 컨테이너 안에 있더라도, portal을 사용하여 나머지 페이지 위에 떠 있는 모달을 만들 수 있음! 🔗

♾️무한 스크롤

관련 PR 바로가기

🪝React Query: useInfiniteQuery Hook

const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
} = useInfiniteQuery({
    queryKey,
    queryFn: ({ pageParam }) => fetchPage(pageParam),
    initialPageParam: 1,
    ...options,
    getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
        lastPage.nextCursor,
    getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
        firstPage.prevCursor,
});

• 무한 스크롤 구현 시에 사용
• useQuery와 비슷
• queryKey, queryFn, initialPageParam는 필수
• data

  {
  	pages,
  	pageParams
  }

  • infinite query data를 가지고 있는 객체
  • pages
    • 가져온 pages를 포함하는 배열
    • flatMap 메서드를 사용하면 배열을 하나의 배열로 flatten 가능!
  • pageParams
    • pages를 가져오는 데 사용되는 page params를 포함하는 배열

👁️IntersectionObserver API

viewport와 target element가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지

• intersection observer 생성

  const intersectionObserver = new IntersectionObserver(callback[, options]);

  • callback: (entries, observer) ⇒ void
    • target element가 보이는 영역 비율이 threshold를 넘을 때 호출할 함수
    • callback 파라미터
      • entries: threshold를 넘어간 요소를 나타내는 IntersectionObserverEntry 객체의 배열
      • observer: callback을 호출한 IntersectionObserver
  • options (optional)

    {
    	root,
    	rootMargin,
    	threshold
    }

    • default로 root는 document viewport, no margin, 0% threshold가 적용됨 (1px만 움직여도 trigger됨)
    • 설정 가능한 값
      • root
        • obersever의 viewport로 사용할 element
        • default document viewport
      • rootMargin
        • root의 bounding box에 적용할 오프셋을 나타내는 문자열 (CSS margin 속성과 유사)
        • default "0px 0px 0px 0px”
      • threshold
        • $0.0 \leq \text{threshold} \leq 1.0$
          • 0.0: target의 pixel이 하나라도 보일 때 (0%)
          • 1.0: target을 온전히 볼 수 있을 때 (100%)
        • default 0.0
• 메서드

  // 모든 target에 대한 주시 해제
  IntersectionObserver.disconnect();
  
  // 주어진 target element 주시 시작
  IntersectionObserver.observe(targetElement);
  
  // 모든 주시 target에 대한 IntersectionObserverEntry 배열 반환
  const intersectionObserverEntries = intersectionObserver.takeRecords();
  
  // 특정 target element에 대한 주시 해제
  IntersectionObserver.unobserve(target);