[React] 13. 리액트 스터디 - useCallback

[ useCallback ]

 

useCallback 은 함수를 재사용할 때 사용

첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.

 

WARNING 메시지

import { useEffect, useState, useCallback } from "react";
import { useParams } from "react-router-dom";
function Detail() {
    const [loading, setLoading] = useState(true);
    const [detailMovie, setDetailMovie] = useState({});
    const {id} = useParams();
    const getMovieDetail = useCallback(async() => {
        const json = await (
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json();
        setDetailMovie(json.data.movie);
        setLoading(false);
    }, [id]);

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

    /*
    const getMovieDetail = async() => {
        const json = await (
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json();
        setDetailMovie(json.data.movie);
        setLoading(false);
    };
    useEffect(() => {
        getMovieDetail();
    }, []);
    */
    return (
        <div>
            {loading ? (
                <h1>Loading.....</h1>   
            ) : (
                <div>
                    <h1>detail</h1>  
                    <p>{detailMovie.title}</p>
                    <p>{detailMovie.description_intro}</p>   
                </div>
            )}
        </div>
    );
}

export default Detail;