# 189 [udemy React 완벽 가이드 노트] 컴포넌트 로딩되자마자 데이터 가져오기 : useEffect를 사용하여

HTTP요청 전송은 컴포넌트의 state를 바꿔버리기 때문에 

useEffect안에 넣어줘야 한다. 

(안그러면 계속 state가 변경되어 무한 반복이 된다) 

 

 

 

function App() {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchMoviesHandler();
  }, []);

 

dependencies에는 무엇을 넣을 것인가?

 

 

fetchMoviesHandler라는 함수 자체를 넣는다면 

함수 자체가 변경될 때마다 렌더링이 발생될 것이고 

외부state를 변경하면 이 함수가 변경되고

그럴 때마다 렌더링이 발생할 것이다. 

 

그런데 이렇게 하면 무한 반복이 된다.

왜냐하면 배웠듯이 함수는 객체이고 

fetchMoviesHandler 함수가 재렌더링 될 때마다 

fetchMoviesHandler  또다시 실행될 것이기 때문.

 

그렇다고 dependencies를 비워두면? 

함수가 외부 state를 사용한다면 의도치않은 버그가 발생할 수 있다. 

 

 

 

 

그러면 어떻게 할것인가?

useCallback을 사용하자 

 

 

const fetchMoviesHandler = useCallback(() => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch("https://swapi.dev/api/films/");
      if (!response.ok) {
        throw new Error("Something went wrong!");
      }
      const data = await response.json();

      const transformedMovies = data.results.map(movieData => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseData: movieData.release_date,
        };
      });
      setMovies(transformedMovies);
      setIsLoading(false);
    } catch (error) {
      setError(error.message);
      setIsLoading(false);
    }
  }, []);

 

 

fetchMoviesHandler를 useCallback으로 감싸고

그 useCallback의 dependencies로 함수에 있는 모든 의존성을 넣어준다. 

그런데 외부 의존성은 없다. 

useState의 state는 의존성으로 추가할 필요가 없다. 

React에 의해 변경되지 않는다고 보장 받았기 때문이다. 

 

async는 function이라고 적었을 때는 function 글자 앞에 적어주면 됐지만 

지금같이 화살표 함수로 변경했을 경우에는 useCallback 안의 익명함수 앞에 적어준다. 

 

 

 const fetchMoviesHandler = useCallback(async () => {
    setIsLoading(true);
    setError(null);

 

그러면 불필요한 함수 재생성을 막을 수 있게 된다. 

 

useEffect는 fetchMoviesHandler 함수 밑에 입력해줘야

호이스팅 문제가 발생되지 않는다.