react api 무한루프 질문 채택완료
김갑수갑수
4년 전
조회 2,595
</p>
<p>import React, {useState, useEffect} from 'react';</p>
<p>import axios from 'axios';</p>
<p> </p>
<p>function MovieList(){</p>
<p> var [movies, setMovies] = useState();</p>
<p> </p>
<p> async function getMovies(){</p>
<p> var temp = await axios.get('<a href="https://yts-proxy.nomadcoders1.now.sh/list_movies.json');" target="_blank" rel="noopener noreferrer">https://yts-proxy.nomadcoders1.now.sh/list_movies.json');</a></p>
<p> setMovies(temp);</p>
<p> }</p>
<p> </p>
<p><span style="background-color:#2ecc71;"> getMovies();</span></p>
<p> </p>
<p> console.log(movies);</p>
<p> </p>
<p> return(</p>
<p> <div>hello</div></p>
<p> );</p>
<p>}</p>
<p></p>
<p>import React, {useState, useEffect} from 'react';</p>
<p>import axios from 'axios';</p>
<p> </p>
<p>function MovieList(){</p>
<p> var [movies, setMovies] = useState();</p>
<p> </p>
<p> async function getMovies(){</p>
<p> var temp = await axios.get('<a href="https://yts-proxy.nomadcoders1.now.sh/list_movies.json');" target="_blank" rel="noopener noreferrer">https://yts-proxy.nomadcoders1.now.sh/list_movies.json');</a></p>
<p> setMovies(temp);</p>
<p> }</p>
<p> </p>
<p> <span style="background-color:#27ae60;"> useEffect(function(){</span></p>
<p><span style="background-color:#27ae60;"> getMovies();</span></p>
<p><span style="background-color:#27ae60;"> }, []);</span></p>
<p> </p>
<p> console.log(movies);</p>
<p> </p>
<p> return(</p>
<p> <div>hello</div></p>
<p> );</p>
<p>}</p>
<p>위에 코드에서는 왜 console.log가 계속 찍히고 아래 코드는 한번만 찍히는지 잘 이해가 안됩니다.
setMovies함수를 실행하면 렌더링을 자동으로 해준다고 들었는데 이때 return 안에 있는 값이 아니라 함수안의 모든 코드를 다시 동작시켜서 그런건가요??
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
4년 전
setMovies으로 값이 변경되게 되면 해당 렌더링 함수를 다시 호출하게 됩니다.
다만 호출시 또 setMovies를 호출하기 떄문에 무한 루프가 되는것이구요
useEffect의 경우 훅이라는 개념의 함수입니다.
설명드리긴 좀 긴 내용같아, 인터넷에 검색해보시는게 좀 더 좋을듯 합니다.
여하튼 다양한 방법이 있지만 기술하신 형태의 useEffect는 MoveList 함수가 호출되는 최초의 한번만 실행한다는 의미입니다.
그렇기에 값이 변경이 되도 해당 useEffect는 최초의 딱 한번만 호출되기 떄문에 더 이상 실행되지 않고 한번만 실행됩니다
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인