실습내용 이해하기

오늘은 URL를 첨부하여 데이터를 끌고와서 react의 map을 사용했습니다.
원하는 정보만 추출하여 렌더링을 하였습니다.
react를 모르는 병아리로 다음 코드들을 정리해보았습니다.

다음은 완성된 코드이고 하나씩 파헤쳐서 이해할 수 있도록 해보겠습니다.

import React from "react";
//=브라우저는 Html,css,js만 읽을 수 있기 때문에 react는 JSX코드를 사용하기 떄문에 이 코드를 작성해서 변환해야합니다.
import { useEffect, useState } from "react";
//useEffect() 함수는 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. 특정 작업이란 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과를 뜻합니다.
import { Link } from "react-router-dom";
//router란? 사용자가 요청하는 URL에 따라 해당하는 URL를 보여주는 페이지이동이라고 생각하시면 됩니다.
const Movies = () => {
  const URL =
    "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year";
  //const(불변변수)로 Movies에 URL주소를 첨부하여 속성값을 넣습니다.
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
 // useState(초기값) 으로 상태 변수의 초기값을 지정합니다. 위의 예제에서는 빈 배열이 초기값과 true로으로 지정되었습니다.
 

  useEffect(() => {
    fetch(URL)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        console.log("data");
        console.log("data.data.movies");
        console.log(data.data.movies);

        setMovies(data.data.movies);
        setLoading(false);
      });
  }, []);
  //fetch에 URL(상단주소)를 주소를 첨부하였습니다. 받은 정보들은 json()를 사용하여 해줘야 읽을 수 있습니다.
 //then console.log를 사용하여 console창에서 data들을 읽을 수 있도록 했습니다.
  return (
    <div>
      {loading ? <h1>영화 정보를 받아오는 중입니다.</h1> : null}
      {movies.map((item) => {
        console.log("item");
        console.log(item);
        console.log(item.title);
        console.log(item.year);
        return (
          <Movie
            key={item.key}
            id={item.id}
            title={item.title}
            img={item.medium_cover_image}
            year={item.year}
          />
        );
      })}
    </div>
//loading ?<h1>을 사용하여 로딩중에 안내문이 나오도록 했습니다.
//return이라는 예약함수를 사용하여 반환값을 얻을 수 있습니다.
//반환값을 반환한다는 의미로 어떤 함수의 결과를 함수에서 얻을 수 있게합니다
//map함수로 필요한 정보를 배열합니다.
//부모함수=Movie에 반환값을 적용해서 Movie의 key,id,title,medium_cover_image,year의 값을 불러옵니다.
  );
};

const Movie = ({ id, title, img, year }) => {
  return (
    <div>
      <Link to={`/movie/detail/${id}`}>
        <h1>{title}</h1>
      </Link>
      <img src={img}></img>
      <h3>{year}</h3>
    </div>
  );
};
//자식 함수= Movie를 불변함수로 id,title,img,year를 지정했습니다.
//return을 사용하여 <div>에 각각의 속성값들이 부모함수에서 정보를 받을 수 있도록 설정했습니다.

export default Movies;
//export를 사용하여 Movies의 코드들을 App.js로 보냈습니다.