[에러] React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

 

useState를 쓰면서 에러가 생겼는데 
일단 임시 방편으로 

코드 아래 쪽에 

useEffect 코드 아래 부분에 이렇게 주석 처리된 코드를 삽입하면 (주석처리 그대로) eslint 경고를 무시하게 된다

  useEffect(() => {
    fetch(url, options)
      .then(res => res.json())
      .then((json) => {
        setMovies(json);
        setLoading(false);
      })
      .catch(err => console.error('error:' + err));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

 

 

더 근본적인 해결방법을 시도했으나 실패
다음에 다시 수정할 생각으로 작성해둔다 

아래 블로그 글에서 작성자분이 아주 깔끔하게 정리해주셨다

 

[경고문] React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array.