[React] 영화 리스트 만들기 - 1

'https://api.tvmaze.com/search/shows?q=batman' 이 주소로부터 영화 정보를 state로 받아서 list 형태로 나타낸다. 영화의 이미지는 필수로 출력하도록 한다.

App.js

import React from 'react';
import CreateMovie from './CreateMovie';
function App() {
  return (
    <>
      <h1>Movie List</h1>
      <CreateMovie />
    </>
  );
}
export default App;

MovieList.js

import React from 'react';
function Movie({ movie }) {
  return (
    <div>
      <li>{movie.movieName}</li>
      <img src={movie.src} alt='movie' />
    </div>
  );
}
function MovieList({ movies }) {
  return (
    <div>
      {movies.map((movie) => (
        <Movie movie={movie} key={movie.id} />
      ))}
    </div>
  );
}
export default MovieList;

CreateMovie.js

import React, { useState } from 'react';
import axios from 'axios';
import MovieList from './MovieList';
let id = [];
let name = [];
let src = [];
function CreateMovie() {
  const [movies, setMoives] = useState([
    { id: 0, movieName: 'defaultName', src: '' },
  ]);
  let { id, movieName, src } = movies;
  async function getMovies() {
    let response = await axios.get(
      'https://api.tvmaze.com/search/shows?q=batman'
    );
    //console.log(response.data);
    response.data.forEach((list) => {
      //console.log(list);
      //id.push(list.show.id);
      name.push(list.show.name);
      //src.push(list.show.src);
      //console.log(movies);
    });
  }
  const onCreate = () => {
    getMovies();
    name.forEach((Name) => {
      //   const movie = {
      //     id: id[i],
      //     movieName: name[i],
      //     src: src[i],
      //   };
      setMoives([
        ...movies,
        {
          //id: id[i],
          movieName: Name,
          //src: src[i],
        },
      ]);
    });
    //console.log(movies);
    console.log(name);
  };
  return (
    <>
      <button onClick={onCreate}>영화 리스트 보기</button>
      <MovieList movies={movies} />
    </>
  );
}
export default CreateMovie;

현재결과

해결 못 한 부분

영화 리스트 보기 버튼을 누르면 영화 리스트가 나오도록 하는데
받아온 데이터의 첫번째 정보만 계속 출력?된다. >> async function 부분이 비동기 처리인데 setmovies를 그 밖에서 따로 처리해줘서 실행 순서가 섞이면서 제대로 실행이 안된것
이미지가 엑박으로 뜨고 제대로 안보인다. >> 데이터를 잘못 가져옴
해결 위해서 require().default사용시 오류남