[nomad coder] 리액트 기초 6 - Movie App

import React from 'react';
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

import Movie from './components/Movie';




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

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


    return(
        <div>
            {loading? ( <h1>Loading...</h1> ) : 
            (<div>
                {movies.map(
                (movie) => (
                    <Movie 
                        key={movie.id}
                        medium_cover_image={movie.medium_cover_image} 
                        title={movie.title} 
                        summary={movie.summary} 
                        genres={movie.genres} />)
                )}
            </div>
                )}
        
        </div>
    )

}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)
reportWebVitals();

---

    useEffect(() => {
        fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`)
        .then((response) => response.json())
        .then((json) => {
            setMovies(json.data.movies);
            setLoading(false);
        });
    }, [])

 

- 영화 정보가 담긴 API를 단 한 번만( [] ) 가져오기 위해 useEffect를 사용한 초기 모습이다.

 

    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); 
        console.log(json)
        }

- 비동기 문법 async await를 사용한 모습이다.

- 최근 트렌드는 async - await를 사용한다고 한다.

 

    const getMovies = async() => {
        const json = await(
            await fetch(
                `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
            )
        ).json();
        setMovies(json.data.movies);
        setLoading(false); 
        console.log(json)
    }

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

- async, await를 통해 더 간추린 모습이다.

- 최근, 동기 비동기에 대해 공부했었는데 또 가물가물해서 다시 한 번 복습을 해야겠다고 생각이 들었다 ㅜㅜ

 

---

- Movie를 구현하는 부분을 컴포넌트화 하였다.

import PropTypes from "prop-types"

function Movie({key, medium_cover_image, title, summary, genres}){
    return (
        <div>
        <img src={medium_cover_image} />
        <h1>{title}</h1>
        <p>{summary}</p>
        <ul>
            {genres.map((g) => (
                <li key={g}>{g}</li>
            ))}
        </ul>
        </div>
    )
} 

Movie.propTypes = {
    medium_cover_image: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie

- 부모 components에서 key, medium_cover_image, title, summary, genres를 받아와서

- return 구문 안에서 그리고 있는 모습이며,

- propTypes를 통해 검증을 하고 있다. 여기서 눈여겨봐야 할 부분은 genres부분은 배열을 받아오기 때문에

- PropTypes.arrayOf(PropTypes.string).isRequired 로 작성하였다.

- 문자열로 이루어진 요소들을 가진 배열을 가진다고 생각한다.

 

- 잡담 : 아니.. propTypes였다가 PropTypes였다가 왜저러는지 모르겠다 ^ _^,,, 이유가 있는걸까