SIR
목록으로
이전글 다음글

react api 무한루프 질문 채택완료

김갑수갑수
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 2,632
답변 1
목록
Copy 
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>

    );

}
Copy 
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 안에 있는 값이 아니라 함수안의 모든 코드를 다시 동작시켜서 그런건가요??
 

#javascript #react

답변 1개

채택된 답변
+20 포인트

setMovies으로 값이 변경되게 되면 해당 렌더링 함수를 다시 호출하게 됩니다.

다만 호출시 또 setMovies를 호출하기 떄문에 무한 루프가 되는것이구요

useEffect의 경우 훅이라는 개념의 함수입니다.

설명드리긴 좀 긴 내용같아, 인터넷에 검색해보시는게 좀 더 좋을듯 합니다.

여하튼 다양한 방법이 있지만 기술하신 형태의 useEffect는 MoveList 함수가 호출되는 최초의 한번만 실행한다는 의미입니다.

그렇기에 값이 변경이 되도 해당 useEffect는 최초의 딱 한번만 호출되기 떄문에 더 이상 실행되지 않고 한번만 실행됩니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고