[react] The result of getSnapshot should be cached to avoid an infinite loop at VideoLayout 에러

The result of getSnapshot should be cached to avoid an infinite loop at VideoLayout

 

리액트로 프론트 작업을 어느정도 완료한 시점에서 기능 테스트를 해보고있는데 아주 가끔 아무런 반응이 없이 하얀 화면만 나타났습니다. 개발자도구에서 로그를 확인해보니 위와 같은 에러가 있네요. 일시적인건가 싶어서 화면을 여러번 refresh 해보니까 에러가 비정기적으로 나타났습니다.

뭔가 문제가 있구나 싶어서 정보를 찾아보니 useffect 에서 사용한 내용이 문제였었습니다.

비디오 재생 기능을 넣었는데 랜덤 재생을 추가하기 위해 useEffect 에 기능 넣고 뒤에 조건으로 내용을 넣었던것이 위와 같은 에러를 만들어냈네요.

useEffect(()=>{
        if(shuffleStatus === "true") {
            setShuffleClass('bg-gray-300');
        } else if(shuffleStatus === "false"){
            setShuffleClass('bg-none');
        }
    }, [shuffleStatus]);

이런식으로 했었는데 해당 useEffect() 를 제거하고 화면을 여러번 갱신해보면 아무런 이상없이 나타납니다.

랜덤 재생 조건을 다른 방식으로 체크해야할거같습니다.