react api 무한루프 질문
본문
import React, {useState, useEffect} from 'react';
import axios from 'axios';
function MovieList(){
var [movies, setMovies] = useState();
async function getMovies(){
var temp = await axios.get('https://yts-proxy.nomadcoders1.now.sh/list_movies.json');
setMovies(temp);
}
getMovies();
console.log(movies);
return(
<div>hello</div>
);
}
import React, {useState, useEffect} from 'react';
import axios from 'axios';
function MovieList(){
var [movies, setMovies] = useState();
async function getMovies(){
var temp = await axios.get('https://yts-proxy.nomadcoders1.now.sh/list_movies.json');
setMovies(temp);
}
useEffect(function(){
getMovies();
}, []);
console.log(movies);
return(
<div>hello</div>
);
}
위에 코드에서는 왜 console.log가 계속 찍히고 아래 코드는 한번만 찍히는지 잘 이해가 안됩니다.
setMovies함수를 실행하면 렌더링을 자동으로 해준다고 들었는데 이때 return 안에 있는 값이 아니라 함수안의 모든 코드를 다시 동작시켜서 그런건가요??
답변 1
setMovies으로 값이 변경되게 되면 해당 렌더링 함수를 다시 호출하게 됩니다.
다만 호출시 또 setMovies를 호출하기 떄문에 무한 루프가 되는것이구요
useEffect의 경우 훅이라는 개념의 함수입니다.
설명드리긴 좀 긴 내용같아, 인터넷에 검색해보시는게 좀 더 좋을듯 합니다.
여하튼 다양한 방법이 있지만 기술하신 형태의 useEffect는 MoveList 함수가 호출되는 최초의 한번만 실행한다는 의미입니다.
그렇기에 값이 변경이 되도 해당 useEffect는 최초의 딱 한번만 호출되기 떄문에 더 이상 실행되지 않고 한번만 실행됩니다
답변을 작성하시기 전에 로그인 해주세요.
