[React] fetch를 사용한 데이터 가져오기

우선 fetch는 리액트에서 API를 이용하여 서버와 비동기 요청을 할 수 있는 하나의 방식 중에 하나입니다.

아래의 코드는 https://www.themoviedb.org/ 사이트에서 제공하는 API 데이터를 가져오는 것을 코드로 나타낸 것입니다.

 

import React, { useEffect, useState } from 'react';
import { API_URL, API_KEY, IMAGE_BASE_URL } from '../../Config';
import MainImage from './Selctions/MainImage';
 
function LandingPage() {
    const [Movies, setMovies] = useState([]);
    const [MainMovieImage, setMainMovieImage] = useState(null);
 
    useEffect(() => {
        const endPoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
        fetch(endPoint)
            .then((response) => response.json())
            .then((data) => {
                console.log(data.results[0]);
                setMovies([data.results]);
                setMainMovieImage(data.results[0]);
            });
    }, []);
 

 

템플릿 문자열을 사용하여 endPoint에 서버에 요청할 url을 완성하여 fetch를 사용하여 API를 가져온다.

 

return (
        <div style={{ width: '100%', margin: '0' }}>
            {MainMovieImage && (
                <MainImage
                    title={MainMovieImage.original_title}
                    description={MainMovieImage.overview}
                />
            )}
        </div>
    );
}
 
export default LandingPage;
 

 

위의 코드는 프로퍼티를 통해서 MainImage에 title과 description을 전달해주는 것입니다.

 

import React from 'react';
 
function MainImage(props) {
    return (
        <div>
            <div>
                <div style={{ maxWidth: '500px', bottom: '2rem', marginLeft: '2rem' }}>
                    <h2 style={{ color: 'black' }}>{props.title}</h2>
                    <p style={{ color: 'black', fontSize: '1rem' }}>{props.description}</p>
                </div>
            </div>
        </div>
    );
}
 
export default MainImage;
 

 

LandingPage에서 전달받은 프로퍼티를 적용시켜줍니다.

 

 

결과 화면

 

더 많은 내용을 위해서는 아래의 링크를 참조하시면 좋을 것 같습니다.

https://developers.themoviedb.org/3/getting-started/introduction

API Docs