medium_jsc_interface.tsx

interface Movie {
  title: string;
}

interface Director {
  name: string;
  age: number;
}

interface Actor {
  code: id;
  name: string;
  age: number;
  movies: Movie[];
}

interface MoviePayload {
  title: string;
  director: Director;
  actors: Actor[];
}

async function getMovie(id: string) {
  return await Controller.getMovie(id);
}

function MovieDetail(id) {
  const [movie, setMovie] = useState(null);
  
  const fetchMovie = async id => {
    const payload = await getMovie(id);
    setMovie(payload);
  }
  
  return (
    <section>
      <div>
        <button onClick={() => fetchMovie("2021")}>Fetch Movie</button>
      </div>
      {movie && (
        <MovieInfo>
          <Title>{movie.title}</Title>
          <Director>{movie.director}</Director>
          <Actors>
            {movie.actors.map(actor => (
              <Actor key={actor.code}>{actor.name}</Actor>
            ))}
          </Actors>
        </MovieInfo>
      )}
    </section>
  )
}