[React]리액트 fetch 와 axios - 영화 정보 가져오기

[ Fetch API ]

const url = '요청 보낼 서버 url';
const option = {
    method: '메소드',
    headers: {
    	'Accept': 'application/json',
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({
    	//데이터
    }),
}

fetch(url, option)
	.then((response) => { ... })

 

 Fetch API 는 자바스크립트에서 API를 연동하기 위해 사용됩니다. 

 

 fetch() 함수는 HTTP response 객체를 래핑한 promise 객체를 반환하여, 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있습니다. 

 

 fetch() 함수로 받은 Response 객체에는 HTTP 응답을 나타내는 프로퍼티들이 있습니다. 그 중 json() 내장 함수인 res.json 메서드 사용 시 HTTP 응답 body 텍스트를 JSON 형식으로 바꾼 프로미스로 반환합니다. 

 

 하지만 Fetch API 는 자바스크립트의 built-in 라이브러리라는 특성 때문에 많은 사람들은 리액트에서 axios를 사용합니다. 

 

 

 

[ axios ]

- axios 설치

// for yarn
$ yarn add axios

// for npm
$ npm i axios

 

import axios from "axios";

const option = {
	url: '요청 보낼 서버 url',
    method: '메소드',
    header: {
    	'Accept': 'application/json',
        'Content-Type': 'application/json; charset=utf-8'
    },
    data: {
    	// 데이터
    }
}

axios(option).then((response) => { ... });

 

 axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다. 

 

 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경합니다. 

 

 axios에서 가장 많이 사용되는 HTTP 메서드에는 get, post, delete, put이 있습니다. 

 

 

 

 

 

[ Fetch vs Axios ]

 

 fetch 와 axios는 동일한 기능을 수행하지만 차이점이 존재하는데요! 

 

 우선 fetch() 는 url이 인자로 들어가고, axios는 url이 option 객체로 들어갑니다. 또한 fetch()는 body 프로퍼티를 사용하며 stringify()로 되어지고, axios는 data 프로퍼티를 사용합니다. 

 

 이처럼 axios는 HTTP 통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계되어 있습니다. 

 

Fetch	Axios
요청 객체에 url이 없다. (url이 인자로 들어간다.)	요청 객체에 url이 있다.
현대 브라우저에 빌트인이라 설치가 필요 없다.	설치가 필요하다.
body 속성을 사용하며 문자열화(stringify)되어 있다.	data 속성을 사용하며 data는 object를 포함한다.
.json() 메서드를 사용해야 한다.	자동으로 JSON 데이터 형식으로 변환된다.
제공하지 않음	요청을 취소할 수 있고 타임아웃을 걸 수 있다.
제공하지 않음	HTTP 요청을 가로챌 수 있다.

 

 

 

 

 

 

[ 영화 정보 가져오기 - 환경 세팅 ]

 

 먼저 다음 사이트에 접속하셔서 회원가입, 로그인 후 API 키를 받습니다. 그리고 api 문서가 있는 페이지로 이동합니다.

https://www.themoviedb.org/

The Movie Database (TMDB)

 

 저희는 영화 정보를 가져올거기 때문에 Movies 카테고리에서 Get API를 가져오면 되겠죠? 

 

 저는 현재 상영중인 영화들의 정보를 주는 now_playing API를 사용하겠습니다. 

 

 다음 명령어를 입력하여 리액트 프로젝트를 생성하신 뒤, src 폴더에 myApi.js 파일을 하나 생성하여 발급받은 API 키를 저장하고 이 파일은 .gitignore 에 포함시켜줍니다. API 키는 노출되면 안되니까요!

 

 

 이후 App.jsx에 API 키와 요청 보낼 서버의 url(아까 복사해둔 now_playing의 API url) 도 선언해줄게요.

 

import React from 'react';
import { apiKEY } from './myApi';

const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKEY}&language=en-US&page=1`;

const App = () => {
  return (
    <div>
    
    </div>
  );
};

export default App;

 

 

 

 

 

[ 영화 정보 가져오기 - Fetch API ]

// src/FetchMovie.jsx
import React, { useState, useEffect } from 'react';
import Movie from './Movie';

const FetchMovie = ({url}) => {
  const [movies, setMovies] = useState([])

  const options = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }
  }

  useEffect(() => {
    fetch(url, options)
    .then(response => response.json())
    .then(response => {
      setMovies(response.results)
    })
  }, []);

  return (
    <>
      <h1>Fetch로 영화 정보 가져오기</h1>
      {movies.map((movie) => (
        <Movie 
          key={movie.id}
          title={movie.title}
          vote_average={movie.vote_average}
          backdrop_path={movie.backdrop_path}></Movie>
      ))}
      <hr />
    </>
  );
};

export default FetchMovie;

 

 

 

[ 영화 정보 가져오기 - Axios ]

// src/AxiosMovie.jsx
import React, { useEffect, useState } from 'react';
import axios from "axios";
import Movie from './Movie';

const AxiosMovie = ({url}) => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    axios.get(url)
      .then(response => response.data)
      .then(response => {
        setMovies(response.results)
      })
  }, []);

  return (
    <>
      <h1>AXIOS로 영화 정보 가져오기</h1>
      {movies.map((movie) => (
        <Movie 
          key={movie.id}
          title={movie.title}
          vote_average={movie.vote_average}
          backdrop_path={movie.backdrop_path}></Movie>
      ))}
    </>
  );
};

export default AxiosMovie;

 

 

 

 

 

// src/Movie.jsx
import React from 'react';

const Movie = ({title, vote_average, backdrop_path}) => {
  return (
    <>
      <h3>제목: {title}</h3>
      <h4>평점: {vote_average}</h4>
      <img src={`https://image.tmdb.org/t/p/w500${backdrop_path}`}/>
      <br />
    </>
  );
};

export default Movie;

 

// src/App.jsx
import React from 'react';
import { apiKEY } from './myApi';
import FetchMovie from './FetchMovie';
import AxiosMovie from './AxiosMovie';

const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKEY}&language=en-US&page=1`;

const App = () => {
  return (
    <div>
      <FetchMovie url={url} />
      <AxiosMovie url={url} />
    </div>
  );
};

export default App;