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

안녕하세요 제로초님.

인피니티 스크롤 로딩 후 추가 데이터를 로딩하고 스크롤 위치를 유지하는 로직에 문제가 있어서 문의드립니다.

아래 코드에서는 setSize의 then문 안에 setTimeout으로 한 번 더 감싸주었는데
setTimeout이 없는경우 데이터가 불러와지기전에(스크롤의 높이가 늘어나지 않은 상태에서) setTimeout내부의 로직이 실행됩니다.

그로인해 스크롤의 높이는 기존높이 - 기존높이 로 scrollTop(0) 과 같은 상태가 되어버리는데요.
setTimeout으로 0초의 딜레이를 주면 또 순서대로 동작을 합니다...
이런경우에 좋은 해결책이 있을까요?

    const onScroll = useCallback((values: positionValues) => {
        if (values.scrollTop === 0 && !isReachingEnd) {
            setSize((prevSize) => prevSize + 1).then(() => {
                setTimeout(() => {
                    if (typeof scrollbarRef !== "function" && scrollbarRef?.current) {
                        scrollbarRef.current.scrollTop(scrollbarRef.current.getScrollHeight() - values.scrollHeight);
                    }
                }, 0);
            });
        }
    }, []);