컴포넌트 만든후 Props로 내려주기

Props로 내려주는 연습을 자꾸해보자!

할수있다 이채야채!!

 

원래 만들었던 영화 만들기 어플

import logo from './logo.svg';
import {useState, useEffect} from "react"
import './App.css';

function App() {
  const [loading,setLoading] = useState(true)
  const [movies,setMovies] = useState([]);
  const getMovies = async() => {
    const response = await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    const json = await response.json()
    setMovies(json.data.movies)
    setLoading(false)

  }
 
  useEffect( ()=>{
    getMovies()
  } 
  ,[])
  console.log(movies)

  return ( 
    <div className="App">
     {loading ? <h1>Loading...</h1> : <div>{movies.map((movie)=>{
          return <div key={movie.id}>
            <img src = {movie.medium_cover_image}></img>
            <h2>{movie.title}</h2>
            <p>{movie.summary}</p>
            <ul>
              {movie.genres.map(g => 
              <li key = {g}>{g}</li>
              )}
            </ul>
            </div>
     })}</div>}
    </div>
  );
}

export default App;

 

 

 

---

 

 

 

 

 

Movie 컴포넌트

function Movie({coverImg, title, summary, genres}){ 
    return(
        <div >
            <img src = {coverImg} alt = {title}></img>
            <h2>{title}</h2> 
            <p>{summary}</p>
            <ul>
                 {genres.map(g => 
                 <li key = {g}>{g}</li>
                )}
            </ul>
        </div>
    )
}
export default Movie;

 

 

Movie 컴포넌트는 {coverImg, title, summary, genres}  이 프로퍼티를 모두 부모 컴포넌트인 App 컴포넌트에서 받아온다.

 

App.js 수정

import logo from './logo.svg';
import {useState, useEffect} from "react"
import './App.css';
import Movie from "./Movie"

function App() {
  const [loading,setLoading] = useState(true)
  const [movies,setMovies] = useState([]);
  const getMovies = async() => {
    const response = await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
    const json = await response.json()
    setMovies(json.data.movies)
    setLoading(false)

  }
 
  useEffect( ()=>{
    getMovies()
  } 
  ,[])
  console.log(movies)

  return ( 
    <div className="App">
     {loading ? <h1>Loading...</h1> : <div>{movies.map((movie)=>{
          return <Movie coverImg = {movie.medium_cover_image} 
                        title = {movie.title} 
                        summary = {movie.summary} 
                        genres = {movie.genres}/>
     })}</div>}
    </div>
  );
}

export default App;