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

더보기 소스코드를 따라하였을 때,

useEffect의 두 번째 인자에 [] 빈 배열을 넣는 경우,

자동으로 사용되는 변수와 함수인 Skip, Limit, getProducts 가 들어가는 현상이 발생합니다.

일단 함수 순서가 강의 내용대로면 getProducts was used before it was definmed 라는 에러가 뜰건데요

이거는 getProducts 함수 밑에 useEffect가 오도록 조정하면 사라집니다

그 다음엔, getProducts function makes the dependencies of useEffect Hook ... 대충 이런 오류 메세지가 나오는데 getProducts 를 useCallback로 감싸줍니다 두번째인자에는 [Products] 넣어주세요 어차피 자동으로 넣어지겠지만...

이제 에러 메세지는 다 해결된 상태일 겁니다

디버깅을 위해 useEffect에 콘솔을 찍게 해두셨다면 이미 눈치 채셨겠지만

이 상태에서는 useEffect가 계속 호출됩니다

원래 두 번째 인자의 변수들이 변경되면 호출되는 걸로 알고 있는데 왜인지는 모르겠으나... 저는 무식하게 해결했습니다

const [firstLoad, setfirstLoad] = useState(true);

    useEffect(()=> {

        if (firstLoad) {

            let body = { skip: Skip, limit: Limit }

            getProducts(body);

            setfirstLoad(false);

        }

    },[Skip, Limit, getProducts, firstLoad]);

https://www.inflearn.com/questions/101006/landingpage%EC%9D%98-%EB%8D%94%EB%B3%B4%EA%B8%B0-%EB%B2%84%ED%8A%BC-%EA%B5%AC%ED%98%84-%EC%A4%91-eslint-%EB%AC%B8%EB%B2%95-%EC%97%90%EB%9F%AC-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4

동일한 질문 내역이 있으나 답변이 없길래 우선 공유해둡니다

useEffect()가 무한호출되는 이유를 아시는 분 있으시면 아무나 댓글 감사합니다