252일차 - 리액트(React) : 영화 평가 웹사이트 완성

라이브러리 설치 목록

axios

react-router-dom

prop-types

gh-pages

 

 

https://kwongeneral.github.io/0907_React_Movie/

Kwonputer React : Movie

---

State

책 : 스테이트는 동적 데이터를 다룰 때 사용한다. 동적 데이터란 말 그대로 변경될 가능성이 있는 데이터를 말한다. Props는 이런 데이터들을 다루지 못한다.

State는 좀 익숙한게, SwiftUI로 앱을 만들 때, 동적 데이터는 전역변수로 State로 선언했었기 때문이다. State로 선언하지 않으면 앱이 빌드될 때, 메모리에 미리 올라가서 값 변경이 이뤄지지 않았다. Swift는 그런 구조였다.

 

생각해보면, Text 입력값을 API값에 따라 변경된 값으로 입력하고 싶었는데, 이 때 State를 쓰지 않으면 구현이 되질 않았다. 그리고 값을 입력하는 방식도 ("\(변수명)") 이런 형식으로 입력해야했다. \인지 /인지는 헷갈린다.

그러고보면.. 어쩌면 메모리 주소값을 가져오는 것일수도 있겠다. State를 적으면은 변수가 가진 값을 가져오는게 아니라, 변수의 주소값에 해당하는 값을 가져오는 것이다. 오..! 이게 맞을 것 같다. String형식으로 동적 데이터를 넣으면 특정 메모리에 올라간 String 변수의 값이 변경되는 게 아니라, 새로운 데이터가 메모리 상에 올라가고 그 데이터를 가져오는 거니까!

State도 그럴 것 같다. 이 변수는 앞으로 주소값으로 참조하겠다는 뜻이 아닐까? 음.. 포인터를 공부했던게 꽤 예전이라 잘 기억이 안난다. 대략적인 개념정도만 기억에 남아있지. 애초에 C언어를 주로 하는게 아닌이상 예전에 했던건 자꾸 가물가물해진다. 그래도 이렇게 갑자기 팍 기억이 나니까, 그때 공부를 해두길 잘했다는 생각이 든다.

이야기가 자꾸 샛길로 샌다... 주소값에 대한 공부는 다시 해야 할 필요성이 있네. 지금 그렇지 않을까? 이런 추측만 나오는게 예전에 공부했던 내용을 까먹고, 그에 대한 개념이 흐릿해져서 추측으로만 생각하게 된다. 차후에 공부해야할 목록 리스트에 추가해둬야겠다.

아무튼! 다시 글을 적어보자!

 

1. State로 숫자 증감 기능 구현

 

2. 클래스형 컴포넌트의 생명주기

 

3. 로딩 구현

 

4. 영화 API 사용해보기 ( npm install axios )

https://yts.mx/api#list_movies

API Documentation - YTS YIFY

니꼴라스가 만든 영화 API -> yts.mx 대신에 yts-proxy.now.sh

 

 

- Postman으로 API 찔러보기

movie_count : 영화 데이터의 총 개수

limit : 보내준 데이터의 개수

 

 

---

1. 라우팅 설정

import React from "react";
import { Link } from "react-router-dom";
import "./Navigation.css"

// a 태그의 특징은 페이지 전체를 다시 그린다.
// 그래서 react-router-dom의 Link 컴포넌트를 사용한다.
function Navigation() {
    return (
        <div className="nav">
            <Link to="/">홈</Link>
            <Link to={"/about"}>정보</Link>
        </div>
    )
}

export default Navigation;

import React from "react";
import './App.css'
import Navigation from "./components/Navigation";

// 라우팅
import { HashRouter, Route } from "react-router-dom";
import About from './routes/About'
import Home from './routes/Home'
import Detail from './routes/Detail'

// exact : path가 정확하게 일치할 경우에만 반응하게 만들어줌.
// component : 어떤 화면을 그릴지 참조.
function App() {
    return (
        <HashRouter>
            <Navigation />
            <Route path="/" exact={true} component={ Home } />
            <Route path="/about" component={ About } />
            <Route path="/movie-detail" component={ Detail } />
        </HashRouter>
    )
}


export default App;

 

2. 정보(About) 페이지

import React from "react";
import './About.css'

function About(props) {
    console.log(props)
    return (
        <div className="about__container">
            <span>
                영화 평가 웹사이트
            </span>

            <span>
                - 2021.09.07 Kwonputer
            </span>
        </div>
    )
}

export default About;

 

3. 메인 페이지

import React from "react";
import axios from "axios";
import Movie from "../components/Movie";
import './Home.css'

class Home extends React.Component {
    state = {
        isLoading: true,
        movie_list: [],
    }

    getMovieData = async () => {
        const {
            data: {
                data: { movies },
            }
        } = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating")

        this.setState({movie_list: movies, isLoading: false})
    }

    componentDidMount() {
        this.getMovieData()
    }

    render() {
        const { isLoading, movie_list } = this.state;

        return (
            <section className="container">
                {
                    isLoading ? (
                        <div className="loader">
                            <span className="loader__text">로딩중...</span>
                        </div>
                    ) : (
                        <div className="movies">
                            {
                                movie_list.map(array_data => (
                                    <Movie
                                        key={ array_data.id }
                                        id={ array_data.id }
                                        year={ array_data.year }
                                        title={ array_data.title }
                                        summary={ array_data.summary }
                                        medium_cover_image={ array_data.medium_cover_image }
                                        genres={ array_data.genres }
                                    />
                                ))
                            }
                        </div>
                    )
                }
            </section>

            // <div>
            //     { isLoading ? '로딩중...' : movie_list.map((array_data) => {
            //         // map은 for문처럼 새 객체를 만들고, 배열의 값을 1개씩 읽어오고 출력함.
            //         return (
            //             <Movie
            //                 key={ array_data.id }
            //                 id={ array_data.id }
            //                 year={ array_data.year }
            //                 title={ array_data.title }
            //                 summary={ array_data.summary }
            //                 medium_cover_image={ array_data.medium_cover_image }
            //             />)
            //     }) }
            // </div>
        )
    }
}

export default Home;

import React from "react";
import PropTypes from 'prop-types';
import './Movie.css'
import {Link} from "react-router-dom";

function Movie({ year, title, summary, medium_cover_image, genres }) {
    return (
        <div className="movie">
            <Link
                to={{
                    pathname: "/movie-detail",
                    state: { year, title, summary, medium_cover_image, genres }
                }}
            >

            <img src={medium_cover_image} alt={title} title={title} />
            <div className="movie__data">
                <h3 className="movie__title">{ title }</h3>
                <h5 className="movie__year">{ year }</h5>
                <ul className="movie__genres">
                    {
                        genres.map((genres_data, index) => {
                            return <li className="movie__genres_li" key={ index }>{ genres_data }</li>
                        })
                    }
                </ul>
                <p className="movie__summary">{ summary.slice(0, 180) }...</p>
            </div>

            </Link>
        </div>

    )
}

// 구조체 생성 => 리액트에는 proptypes로 구조체를 만드는 것으로 보임.
Movie.propTypes = {
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    medium_cover_image: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Movie;

 

4. 깃허브 페이지 배포를 위한 설정

{
  "name": "react_movie",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.4",
    "gh-pages": "^3.2.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "set PORT=3333 && react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d 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://kwongeneral.github.io/0907_React_Movie"
}