14.3 HTTP 요청보내기: 요청에 useEffect() 사용하기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

요청에 useEffect 사용하기

최초 렌더링시에 fetchMoviesHandler 함수가 실행되도록 useEffect를 사용하였다.

그리고 강의에서 배운대로 의존성 배열이 없는건 깔끔한 방식이 아니기 때문에

의존성 배열에도 fetchMoviesHandler를 넣어주었다.

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

하지만 결국 의존성 배열에 함수가 들어갔기 때문에 무한루프가 걸릴 수 있다. (함수의 객체 때문에..)

그래서 다시 이를 해결하기 위해 fetchMoviesHandler 함수에 useCallback 을 사용하여 리액트 내부에 

함수 객체를 저장하는 방법으로 하면 무한루프도 안걸리고 코드도 깔끔해 질 수 있다.

const fetchMoviesHandler = useCallback(async () => {
    setIsLoding(true);
    setError(null);
    try {
    .
    .
    .

모든 코드

 

import React, { useState, useEffect, useCallback } from "react";

import MoviesList from "./components/MoviesList";
import "./App.css";

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

  const fetchMoviesHandler = useCallback(async () => {
    setIsLoding(true);
    setError(null);
    try {
      const res = await fetch("https://swapi.dev/api/films/");

      if (!res.ok) {
        throw new Error("Something went wrong!");
      }
      const data = await res.json();

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

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

  let content = <p>Found no movies.</p>;

  if (movies.length > 0) {
    content = <MoviesList movies={movies} />;
  }
  if (error) {
    content = <p>{error}</p>;
  }

  if (isLoding) {
    content = <p>Loding...</p>;
  }

  return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>{content}</section>
    </React.Fragment>
  );
}

export default App;