useEffect 무한루프

오늘 axios 로 API 를 받아와 Mount 후 데이터를 state 에 전달하려 했는데 ,
문제가 생겼었다.
useEffect 에 문제가 있었는데 , Mount를 하든 Update를 하든 계속 useEffect를 무한 호출 하는 문제였다..

??..

이렇게 되면 UI상에서도 문제가 생기고 , 메모리낭비가 매우 심하게 되어버린다.
처음 이문제를 접했을때 함수컴포넌트를 포기해야하나 싶었지만 , 그렇게 싶게 관두고 싶지 않았다.

더 자료를 찾아보니 , useEffect에 첫번째 인자로 arrow function 즉
Mount 이후 실행할 코드가 들어간다면 두번째 인자는 의존성 배열이라고 , 배열 혹은 state 변수를 넣어줄 수 있다.

첫번째 인자의 함수를 실행하기 전 두번째 인자값에서 업데이트 된게 있는지 확인한 다음
업데이트 된 값이 없다면 useEffect를 한번만 실행하게 된다.

기본적으로는 두번째인자를 생략해두었었다.

const [isLoading, setLoad] = useState(true); 
const [moviesItem, setMovies] = useState([]);

useEffect(()=>{
      const getMovies = async () => {
      const {
        data: {
          data: { movies },
        },
      } = await axios.get("url");
      setMovies(movies);
      setLoad(false);
    };
    getMovies();
})

이 경우인데 , 이 코드는 영화 API를 받아올때 까지 기다렸다가 받아오면
state 값에 불러온 list data를 담고 , 로드 상태를 완료 상태로 바꿔주는 함수였다.
하지만 영화 리스트만큼 계속 useEffect를 불러왔었다는거고 , 그 해결법은 두번째 인자에 [] 를 추가 함으로 써 Mount 시 한번만 useEffect를 호출하게 하는것

useEffect(()=>{
      const getMovies = async () => {
      const {
        data: {
          data: { movies },
        },
      } = await axios.get("url");
      setMovies((item) => (item = movies));
      setLoad(false);
    };
    getMovies();
}, [])

이렇게 인자를 생략하지 않으니 state 가 업데이트 되어도 useEffect를 호출하지 않았다.