React 공부 6일차

<영화 정보가 담긴 json파일 가져와 웹브라우저에 보이도록 하기>

App.js 

import {useState, useEffect} from "react";

import Movie from './components/Movie'; //자식 component 파일 import 해주는 거 잊지 말기!!

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")).json();

    setMovies(json.data.movies);

    setLoading(false);

  }

  useEffect(() => {  

    getMovies();

  },[])

  console.log(movies);

  return (

  <div>

    {loading? (<h1>Loading...</h1>) : (

      movies.map((movie)=>(

        //주의!!: return 바로다음에 개행이 오면, 아무것도 return하지 않는 것으로 인식

        <Movie

        //key는 React.js에서만, map 안에서 component들을 render할 때 사용하는 것.

        key={movie.id}

        coverImg={movie.medium_cover_image}

        title={movie.title}

        year={movie.year}

        summary={movie.summary}

        genres={movie.genres}

        />

      ))

    )}

</div>

)

}

export default App;

1) json 파일 가져오기

*React 공부 4일차에서 정리했던 async/await 이용

await은 최상단 코드에서 사용 불가하지만, async()=>{   }로 감싼 코드 안에서는 사용할 수 있다.

 

json파일 fetch가 완료될때까지 await

-> fetch 완료된 파일을 .json()(promise 리턴함.) 함수 실행 완료할 때까지 await

-> const getMovies에 promise 객체 할당

 

2) loading중일때와 아닐 때

loading===true이면?

    Loading... 글자 화면에 표시

loading===false이면?

    map 함수를 이용해 각각의 movie 객체마다 <Movie /> component 실행

•     Movie.json 파일에 json파일에서 불러온 정보 객체들을 전달해줘야 함 (props 지정).
•     key는 React.js에서만, map안에서 component들을 render할 때 사용하는 것.(Movie.js 파일에선 key 지정 필요 x)

 

Movie.js 

import PropTypes from "prop-types";

function Movie({coverImg, title, year, summary, genres})

{ //해당 정보들을 parent component들로부터 받아온다.

    return  (<div>

        {/* 모든 img들은 alt 속성을 가진다? */}

        <img src={coverImg} alt={title}></img>

          <h2>{title}</h2>

          <h3>{year}</h3>

          <p>{summary}</p>

          {/* JSX 문법을 사용할 때 {중괄호} 빼먹지 않도록 주의!! */}

          {

              genres&&genres.length>0? <ul>

              {genres.map((g)=>{

                return <li key={g}>{g}</li>

              })}

            </ul> : null

            }

         

      </div>

      )

}

Movie.propTypes = {

    coverImg: PropTypes.string.isRequired,

    title:PropTypes.string.isRequired,

    year: PropTypes.number.isRequired,

    summary: PropTypes.string.isRequired,

    genres: PropTypes.arrayOf(PropTypes.string).isRequired,

}

export default Movie;

부모 component에서 <Movie /> component에 지정한 props들을 받아옴.-> ({coverImg, title, year, summary, genres})

받아온 props들을 html 태그들을 사용해 게시함.

genres는 array 자료형의 정보이므로, map을 사용해 <li> 형태로 게시함

•      map안에서 component들을 render할 때 key값을 주는 것 잊지 말기!!

    {genres.map((g)=>{

                    return <li key={g}>{g}</li>

                  })}

 

 

+) propTypes 지정하기

prop의 자료형 타입이 지정한 타입에서 벗어나면 경고 문구를 출력해줌. 의도치 않은 실수를 줄일 수 있음.

PropTypes import하기: import PropTypes from "prop-types";

{PropNames}:PropTypes.{자료형}(.isrequired)

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

각 영화를 클릭하면, 영화의 세부정보를 보여주는 새로운 페이지로 전환하고 싶다면...?

React Router

React Router가 하는 일: 페이지 전환

Terminal에서 react-dom 설치하기

Home router: 모든 영화를 보여줌

Movie router: 하나의 영화에 대한 세부정보를 보여줌.

 

*App.js는 앞으로 router들을 render할 것임.