인프런 커뮤니티 질문&답변

저는 계속 2번씩 호출이 되는데 제가 개인프로젝트에 적용하는 과정에서 코드가 달라진 부분이 있어서 그런것같습니다. 네 알려주신대로 한번 적용해보겠습니다 감사합니다.

일단 아래와 같이 해결해서 중복호출 막았습니다.

혹시나 보시게되면 throttle 어떻게 하셨는지 보여주실 수 있으실까요??

  useEffect(() => {
    if (inView) {
      // 화면에 보일 때
      !isFetching && hasNextPage && fetchNextPage();
    }
  }, [inView, hasNextPage, fetchNextPage]);

const throttledFetchNextPage = throttle(() => {

!isFetching && hasNextPage && fetchNextPage()

}, 3000)

useEffect(() => {

if (inView && hasNextPage && !isFetching) {

throttledFetchNextPage()

}

}, [inView, hasNextPage, isFetching, throttledFetchNextPage])

저는 일단 lodash설치하고 거기서 throttle import해서 사용했습니다
구글링해보니 throttle같은 간단한 기능은 라이브러리 사용하는것보다 직접 utils에 구현해놓고 import해서 쓰는게 좋다고 하더라구요,

좋은 코드가 아닌것같은데 그래도 일단 공유드립니다

요롷게도 해결했습니다
마지막 아이템한테만 ref를 넘겨주어 감싸는 태그 ref넣어주기!

useEffect(() => {
    if (inView) {
      hasNextPage && fetchNextPage();
    }
  }, [inView, hasNextPage, fetchNextPage]);

  return res?.pages?.map((pages, pageIndex) => (
    <Fragment key={pageIndex}>
      {pages.map((e, itemIndex) => {
        const lastPage = pageIndex === res.pages.length - 1;
        const lastItemInPage = itemIndex === pages.length - 1;
        const isLastItem = lastPage && lastItemInPage;
        if (isLastItem) {
          return <MainCenterListItem key={e.id} {...e} ref={ref} />;
        }
        return <MainCenterListItem key={e.id} {...e} />;
      })}
    </Fragment>
  ));

혹시 비슷한 고민을 하시는 분들이 계실까 해서 늦었지만 남겨봅니다.

일단 처음 확인해볼것이
1. ref하나에서 fetch가 두번되느냐
2. ref가 (새로운 데이터가 fetching은 끝났으나 render되지 않아서) 화면에 여러번 나오는가
이것을 확인하기 위해 아래 첨부한 코드 맨 밑의 getRandomColor함수로 ref배경색을 계속 바꿔줬습니다.

1. ref하나에서 fetch가 두번 된다면 IntersectionObserver를 사용하는 로직에 문제가 있다는 것이고 (아닐 수도 있음)
저는 2번 경우였고 아래 코드중 위에(첫번째 return문으로 해결했습니다.)
jsx문법의 특성상 조건이 있는 블럭 &&나 || 등 조건이 있는 블럭을 만나면
그 블럭이 완전히 실행 된 후
그 밑의 코드가 실행된다고 합니다.
이렇게 해서 data render가 완전히 실행 된 후 div가 나타나게 하는 식으로 결국 해결했습니다.
{condition

 return (
    <VStack spacing={8} align='stretch'>
      {posts?.pages &&
        posts.pages.map((page, i) => (
          <Box key={i}>
            {page.map((post) => (
              <FeedPost key={post.id} post={post} />
            ))}
          </Box>
        ))}
      {hasNextPage && (
        <Box
          ref={intersectRef}
          h={'100px'}
          backgroundColor={getRandomColor()}
        />
      )}
      {posts?.pages.length === 0 && (
        <Text fontSize={'md'} color={'blue.400'}>
          다른 유저를 팔로우하고, 게시글을 확인해보세요 :D
        </Text>
      )}
    </VStack>
  );
 return (
    posts?.pages && (
      <Container maxW={'container.sm'} py={10} px={2}>
        {posts.pages.map((page, i) => (
          <Box key={i}>
            {page.map((post) => (
              <FeedPost key={post.id} post={post} />
            ))}
          </Box>
        ))}
        {hasNextPage && (
          <Box
            ref={intersectRef}
            h={'1000px'}
            backgroundColor={getRandomColor()}
          />
        )}
        {posts?.pages.length === 0 && (
          <Text fontSize={'md'} color={'blue.400'}>
            다른 유저를 팔로우하고, 게시글을 확인해보세요 :D
          </Text>
        )}
      </Container>
    )
  );
function getRandomColor() {
  // 랜덤한 색상 생성
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}