react api 무한루프 질문 채택완료
</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는 최초의 딱 한번만 호출되기 떄문에 더 이상 실행되지 않고 한번만 실행됩니다
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택