[React] SWAPI 이용하기

오늘은 SWAPI를 이용한 애플리케이션을 만들어보겠습니다.

 

 

[ SWAPI ]

SWAPI에는 각종 실습을 할 수 있는 더미데이터가 존재합니다.

 

 

https://swapi.dev/

SWAPI - The Star Wars API

 

 

 

 

📌 App.js

 

import React, { useState, useEffect , useCallback } from "react";
 
import MoviesList from "./components/MoviesList";
import "./App.css";
 
function App() {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  
 
  const fetchMoviesHandler = useCallback( async () => {
    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 transformedData = data.results.map((movieData) => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          releaseDate: movieData.release_date,
          openingText: movieData.opening_crawl,
        };
      });
      setMovies(transformedData);
      setIsLoading(false);
    } catch (error) {
      setError(error.message);
    }
    setIsLoading(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(isLoading) {
    content = <p>Loading...</p>;
  }
 
  return (
    <React.Fragment>
      <section>
        <button onClick={fetchMoviesHandler}>Fetch Movies</button>
      </section>
      <section>
        {content}
      </section>
    </React.Fragment>
  );
}
 
export default App;
 
 

 

1. SWAPI를 통해 데이터 받아옵니다. 

 

  const response = await fetch("https://swapi.dev/api/films");

 

 

2. useEffect를 사용하여 button을 누르지 않아도 페이지 로드 시 자동으로 fetchMoviesHandler 함수를 호출하여 movieList를 가져옵니다. 

 

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

 

 

3. useCallback을 사용하여 fetchMovieHandler의 재사용을 방지합니다.

 

const fetchMoviesHandler = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch("https://swapi.dev/api/films/");
      if(!response.ok) {
        throw new Error('Something went wrong!');
      }
      const datas = await response.json();
      const loadedMovies = datas.results.map((data) => ({
        id: data.episode_id,
        title: data.title,
        openingText: data.opening_crawl,
        releaseDate: data.rease_date,
      }));
      setMovies(loadedMovies);
    } catch (error) {
      setError(error.message);
    }
    setIsLoading(false);
  },[]);

 

 

📌 MoviesList.js

 

import React from 'react';
 
import Movie from './Movie';
import classes from './MoviesList.module.css';
 
const MovieList = (props) => {
  return (
    <ul className={classes['movies-list']}>
      {props.movies.map((movie) => (
        <Movie
          key={movie.id}
          title={movie.title}
          releaseDate={movie.releaseDate}
          openingText={movie.openingText}
        />
      ))}
    </ul>
  );
};
 
export default MovieList;
 

 

 

📌 Movie.js

 

import React from 'react';
 
import classes from './Movie.module.css';
 
const Movie = (props) => {
  return (
    <li className={classes.movie}>
      <h2>{props.title}</h2>
      <h3>{props.releaseDate}</h3>
      <p>{props.openingText}</p>
    </li>
  );
};
 
export default Movie;