ReactJS 4일차

#4.0 Fetching Movies from API

• axios: fetch 위에 있는 작은 layer

• axios 사용법
  - npm i axios

• axios에 대한 자세한 내용은 shin6403님의 벨로그를 보고 공부했다.

state = {
      isLoading: true,
      movies: []
    };
getMovies = async () => {//async 비동기로 만듬 await붙어있는 함수가 다 끝나고 진행되도록 함
  const {
    data: {
      data: {
        movies
      }
    }
  } = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
  this.setState({ //변하는 값 설정
    movies,
    isLoading: false
  });
}; 
componentDidMount = () => {
  this.getMovies();
};

---

#4.1 Rendering the Movies

• Movie component 만들기

import React from "react";
import PropTypes from "prop-types";
import "./Movies.css";

function Movie({id, year, title, summary, poster, genres}){
    return <div className="movies__movie">
        <img src={poster} alt={title} title={title}/>
        <div className="movie_data">
            <h3 className="movie__title">{title}</h3>
            <h5 className="movie__year">{year}</h5>
            <ul className="genres">
                {genres.map((genre, index) => ( //map함수에 index 자동 생성
                    <li key={index} className="genres__genre">{genre}</li> //key값 추가해줘야함 
                ))}
            </ul>
            <p className="movies__summary">{summary}</p>
        </div>
    </div>;
}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;

• Movie componenet App.js에 redering 하기

render() {
  const { isLoading, movies } = this.state;
  return ( <section className = "container" > { //jsx는 html속성의 class와 객체의 class가 혼돈이 오기 때문에 className으로 적어줘야한다.
      isLoading ? ( <div className = "loader" >
        <span className = "loader__text" > Loading... </span>  
        </div> ) : (
          <div className = "movies">
            {movies.map(movie => (
              <Movie
                key = {movie.id}
                id = {movie.id}
                year = {movie.year}
                title = {movie.title}
                summary = {movie.summary}
                poster = {movie.medium_cover_image}
                genres = {movie.genres}
              />
            ))}
          </div>
        )
    } </section>);
  }

---

#5.0 Deploying to Github Page

• gh-pages: 웹사이트를 github의 github page 도메인에 나타나게 해준다.

1. 터미널에서 npm i gh-pages 실행한다.
2. package.JSON에 "homepage" : "{깃허브 아이디}.github.io/{프로젝트 이름}" 추가한다.
3. package.JSON의 scripts에 "deploy": "gh-pages -d build", "predeploy": "npm run build" 을 추가한다,
4. 터미널에서 npm run deploy 실행한다.

{
  "name": "my_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "gh-pages": "^3.2.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://pjoon357.github.io/my_app"
}