영화 목록 데이터 받아오기 & 타입스크립트와 useState , map

import Head from "next/head";
import Seo from './Seo';
import { useEffect, useState  } from 'react';

const API_KEY = "4c5d0a3408a359c4fa9760f4856529bc";

interface SetData {
  id:number;
  original_title:string;
}


/*api요청으로 data를 받아온 값을 useState 값으로 받아서 사용하려면 
사용하고자하는 데이터들의 속성 타입을 지정해줘야 한다. useState의 타입을 지정할 때는 
제네릭을 사용한다 
<SetData[]> 에서 map 메서드는 배열값이어야 하기 때문에 []를 추가하였다.
*/ 


export default function Home() {
  const [movies, setMovies] = useState<SetData[]>([])
  useEffect(() => {
    (async () => {
      const { results } = await 
       (await fetch(
            `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
      )).json();
      setMovies(results);
    })(); // ---> aysnc 부분이 익명 함수(재사용 불가)로 작성되었고, 
    	//익명 함수는 즉시 실행해야 하기 때문에 ()를 이용해 익명 함수를 바로 호출하는 것
  } ,[]) 
    return ( 
        <div>
          <Seo title="Home"/> 
          {!movies && <h4>Loading...</h4>}
          {movies?.map((movie) => (
            <div key={movie.id}>
              <h4>{movie.original_title}</h4>
            </div>
          ))}
        </div>
    )        
}

기본적으로 useState는 따로 타입을 지정하지 않아도 타입을 유추해주지만 이렇게 데이터값을 받아올 때는 타입을 전부 any값으로 취하기 때문에 따로 타입을 지정해야줘야 한다.