Movie-app

Movie-app | Nomard-corder

(정돈된 글X, 강의보고 휘리릭 정리한 글)

 

- axios로 data 받아오기 -> npm i axios 실행 -> import axios

 

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  state = {
    isLoading: true,
    movies : []
  }

  getMovies = async() => {
    const movies = await axios.get("https://yts.mx/api/v2/list_movies.json")
  }

  componentDidMount(){
    this.getMovies();
  }

  render(){
    const {isLoading} = this.state
    return <div>{isLoading ? "Loading..." : "im ready"}</div>
  }
}

export default App;

 

-  componentDidMount 함수에 직접 axios로 api 주소를 넣어서 작업을 해도 말?은 되지만,

주소를 받아오는데 시간이 걸린다- async, await를 사용해서 api가 받아질때까지 기다리기(async는 함수앞에, 함수 내부 await는 비동기실행 앞에 작성)

 

 

 

movie data를 가져와서 state에 있는 render function에 보여주기

 

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  state = {
    isLoading: true,
    movies : []
  }

  getMovies = async() => {
    const {data : {data : {movies}}} = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating")
    //this.setState({movies : movies, isLoading: false}) 아래와 같은 코드이다. es6문법으로 아래와 같이 refactoring 가능
    this.setState({movies, isLoading: false})
  }

  componentDidMount(){
    this.getMovies();
  }

  render(){
    const {isLoading} = this.state
    return <div>{isLoading ? "Loading..." : "ready"}</div>
  }
}

export default App;

 

 

 

movie.js component

- component가 state가 필요없을 시, class component의 형태로 작성하지 않아도 된다. -> function component로 작성함

 

//movie.js component
import React from 'react';
import PropTypes from 'prop-types';

function Movie ({id, year, title, summary, poster}){
    return <h4>{title}</h4>
}

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

export default Movie;

//App.js
import React from 'react';
import axios from 'axios';
import Movie from './components/movie';

class App extends React.Component {
  state = {
    isLoading: true,
    movies : []
  }

  getMovies = async() => {
    const {data : {data : {movies}}} = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating")
    this.setState({movies, isLoading: false})
  }

  componentDidMount(){
    this.getMovies();
  }

  render(){
    const {isLoading, movies} = this.state
    return <div>{isLoading ? "Loading..." : movies.map((movie)=>
      <Movie key={movie.id} 
              id={movie.id} 
              year={movie.year} 
              title={movie.title} 
              summary={movie.summary} 
              poster={movie.medium_cover_image}
      />
    )}</div>
  }
}

export default App;

 

navigation 만들기 - react-router dom 설치,사용

 

react router는 기본적으로 url을 가져온다.

exact={true}를 첫번째 route에 추가해준다  => url이 오로지 "/"일때만 home을 렌더링 해준다 (/something 이라면 무시)

- 2개의 component를 따로 렌더링 할 수 있게 해줌

- exact = 이거 아니면 렌더링 하지 않겠다

 

navigation component를 만들어서 home과 about을 연결해주기

→ 연결은 되는데 페이지 전체가 리로딩된다

=> 해결 : a태그를 사용하지 않고, react-router-dom에서 사용하는 Link to 를 사용한다

 

+) navigation style시 Link를 router 파일 밖에서 사용할 수 없다

=> 해결 : app.js에서 router안에 navigation(Link)넣어주기

+) navigation은 props가 없음

(router안에 모든것을 넣을 필요가 없음, Link를 쓰고 있다면 router안에 넣어야 한다)

 

→ Link를 통해 정보를 router로 보냄

 

import React from 'react';

class Detail extends React.Component {
    componentDidMount(){
        const { location, history } = this.props;
        //location=내가 클릭한 영화의 큰 정보
        //loaction.state=내가 클릭한 영화 정보(detail) / undefined = 정보없음
        //history로 페이지 이동 가능
        if(location.state === undefined){
        //클릭정보가 없을시, main page로 이동 
            history.push('/')
        }
    }
    render(){
        return(
            <span>hello</span>
        )
    }
}

export default Detail;

 

- movie data 클릭을 안하고 detail로 갔을 경우 (= state === undefined일 경우)막기 

 

=> axios, router 사용