React - custom hook (useFetch)만들기

컴포넌트와 라우터많이 만들고 나누다 보니 여기저기서 fetch가 중복적으로 들어갔다.
코드를 줄이고 효율적으로 사용하기 위해 hook을 만들어 본다.

기존 코드

    const [loading, setLoading] = useState(true);
    const [movie, setMovie] = useState([]);

    const KEY = "키번호";
    const DATA_URL = `https://api.themoviedb.org/3/movie/`;
    const URL = `${DATA_URL}popular?api_key=${KEY}`

    const getMovies = async () => {
        const json = await (
            await fetch(URL)
        ).json();
        setMovie(json.results);
        setTv(json.results);
        setLoading(false);
    }

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

기존 코드의 경우는 TmdbApi(영화api)에서 movie & popular(인기 영화)만 가져오는 코드였다.(DATA_URL & URL 부분)

변경되어야 할 부분들을 바꿔 보자.

useFetch

function useFetch(data,category){
    const KEY = "키번호";
    const DATA_URL = `https://api.themoviedb.org/3/`;
    const URL = `${DATA_URL}${data}/${category}?api_key=${KEY}`
    }

우선 custom hook을 만들 때 코드컨벤션이 있다.
바로 use가 앞에 붙어야한다는 것(다들 아시겠지만)

useFetch에서 변경해줄 변수를 작성해 주고 URL
에 집어 넣어 주자.

data = movie & tv & people등 api에서 받아오는 파라미터 유형
category = data 안에 가져올 종목(?)의 파라미터

만약 영화의 인기종목을 갖고오고 싶다면

${DATA_URL}movie/popular?api_key=${KEY}`

위 처럼 변경될 것이다.

import {useState,useEffect} from "react";

function useFetch(data,category) {
    const [loading, setLoading] = useState(true);
    const [movie, setMovie] = useState([]);
    const [tv,setTv] = useState([]); 

    const KEY = "키번호";
    const DATA_URL = `https://api.themoviedb.org/3/`;
    const URL = `${DATA_URL}${data}/${category}?api_key=${KEY}`

    const getMovies = async () => {
        const json = await (
            await fetch(URL)
        ).json();
        setMovie(json.results);
        setTv(json.results);
        setLoading(false);
    }

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

    return {loading,movie}
}
export default useFetch;

로딩화면을 보여주는 loading과 영화의 정보를 담고있는 movie를 밖에서 사용하기 위해 리턴 시켜준다. (그냥 편하게 영화로 통일)

useFetch코드는 끝이났다.
응용해 보도록 하자.

import

import useFetch from "../hooks/useFetch";

function Home() {
   const { loading, movie} = useFetch('movie', 'now_playing');
}

위 처럼 import 해준뒤 리턴해줄 loading과movie를 useFetch에 담아주고, 인자 값은 data ,category 순으로 넣어준다.

이로써 많던 코드가 useFetch에 담겨 한줄로 정리 되었다.

---

Detail값

Detail 라우터의 경우는 useParams와 useState 초기값이 다르기에 따로 만들어 주었다.

import {useState,useEffect} from "react"
import { useParams } from "react-router-dom";
function useDetailFetch(data){
    const [loading, setLoading] = useState(true);
    const [details, setDetails] = useState([]);
    const { id } = useParams();
    
    const KEY = "키번호";
    const DATA_URL = `https://api.themoviedb.org/3/`;
    const URL =`${DATA_URL}${data}/${id}?api_key=${KEY}`
    
    const getMovie = async () => {
        const json = await (
            await fetch(URL)
        ).json();
        setDetails(json);
        setLoading(false);
    };
    useEffect(() => {
        getMovie();
    }, []);
    return {loading,details}
    
} 

export default useDetailFetch;

data 눌렀을 때 받아오는 id값을 설정해 주면된다.

응용

 const { loading, details } = useDetailFetch("movie");

다음에는 더 좋은 코드로 만들어 볼수 있기를..