함수형 컴포넌트 내에서 무한루프 문제

[김연준]

function Page4(props){
let {id} = useParams();
let [ball, setball] = useState(['/몬스터볼.webp', '/열린몬스터볼.png'])
 
 console.log(props.id)
props.setid(id)
 
 
setTimeout( ()=>{setball(['/열린몬스터볼.png', '/몬스터볼.webp'])}, 500);


이와 같은 코드에서 무한 루프에 빠져서
function Page4(props){
let {id} = useParams();
let [ball, setball] = useState(['/몬스터볼.webp', '/열린몬스터볼.png'])
 
 
useEffect(function(){
console.log(props.id)
props.setid(id)
 
 
setTimeout( ()=>{setball(['/열린몬스터볼.png', '/몬스터볼.webp'])}, 500);
 },[])

useEffect 를 사용하고 빈배열을 사용해서 무한루프에서 나오긴 했는데

왜 기존코드에서 무한루프가 발생했는지 이유도 모르겠고
기존에는 useEffect 없이도 무한루프가 돌지 않았는데 왜 갑자기 무한루프가 도는지 모르겠습니다.
(두개의 state를 변경했기 때문에 한 state가  리렌더링 될때 다른 setstate가 실행되서 그런가? 라고 어렴풋이 생각했는데 잘 모르겠습니다. ㅠㅠ)

[codingapple]

재렌더링되면 컴포넌트 안의 코드 다시 읽습니다
setTimeout 실행되면 state 변경되고
그럼 재렌더링되고 
그럼 setTimeout 또 실행되고 
그런 식인듯요

[글쓴이]

글