김치찌개
87
2020-08-20 18:40:33
2
134

react hooks state 관련 질문있습니다.


Intersection observer 을 사용한 무한스크롤 구현 연습중입니다.


옵저버부분은 다음과 같습니다.

useEffect(() => {
        const ioOptions = {
            root: null,            
            threshold: 1
        }
        
        const target = document.querySelector('#target');
        const io = new IntersectionObserver(callback, ioOptions);
        io.observe(target);
        return () => {
            io.disconnect();
        }
    }, [])


콜백함수 부분입니다.

const callback = (entries: any, observer: any=> {
        if(entries[0].isIntersecting) {
            setLoading(true);
            setTimeout(() => {
                setLoading(false);
                LoadRecipe();
            }, 500)
        }
    }


레시피를 불러오는 함수 LoadRecipe 내에서는 page 라는 state를 쓰고 있는데,

콘솔을 찍을때마다 항상 값이 기본값인 0입니다.

함수 외부에서 임의로 버튼을 생성하여 page의 값을 바꾸면 잘 바뀝니다.

어떤게 문제일까요?

사진 속 77번째 줄이 함수내에서 console.log(page) 한 것입니다.

혹시 설명이 부족하였다면 필요한 부분을 말씀해주시면 바로 올려드리겠습니다.

고수님들 답변 기다리겠습니다 감사합니다 !!

1
  • 답변 2

  • 김치찌개
    87
    2020-08-20 18:42:45

    답을 찾은것 같습니다.

    찾아본 웬만한 예제부분에는 useEffect에 []가 포함되어있어서 저도 그렇게 썼는데 방금 []를 삭제하니 값은 잘 바뀝니다 .. 

  • 호나우딩요
    32
    2020-08-21 00:58:59

    사진 속 77번째 줄이라고 하셨는데 사진이 없네요.. 전체 소스를 봐야지 좀 알 것 같아요..

    참고로 useEffect에 두번째 파라미터에 빈배열을 넣으면 컴포넌트가 처음 렌더링 됐을 때만 실행합니다.

    배열에 page를 넣으면 page state가 변할 때 마다 리렌더링 합니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.