movie api활용해서 react 어플리케이션 제작

react state 변경하기

qiita.rb

import React, { Component } from 'react';
class App extends Component {
  state = {
    title : 'onemore movie'    
  }

  // after 3 second chante the state
  _renderMovie() {
    const title = this.state.title;
    setTimeout(() => {
      this.setState({
        title : 'hi sean'
      })
    },3000)
    return title;
  }

  render() {
    const {title} = this.state;
    return (
      <h1>{title ? this._renderMovie() : "app-loading"}</h1>

    );
  }
}

export default App;

qiita.rb

import React, { Component } from 'react';
import Movie from './Movie'

class App extends Component {
  state = {}
  // component 가 mount 된 후 아래 함수를 불러온다.
  componentDidMount() {
    this._getMovie()
  }

  // after 3 second chante the state
  _renderMovie = () => {
    const movies = this.state.movies.map(
      movie =>
          <Movie 
          title={movie.title} 
          poster={movie.small_cover_image} 
          key={movie.id} 
          />
    )
    return movies; // map으로 돌린것을 리턴함
  }
  //javascript 의 새로운 컨셉 promise
  _getMovie = async() => {
    const movies = await this._callApi();
    this.setState({
      movies
    })
  }
  // ajax 를 이용해서 영화 api를 가져온다
  _callApi() {
    return(
      fetch("https://yts.am/api/v2/list_movies.json?sort_by=download_count")
      .then(response => response.json())    
      .then(json => json.data.movies)
      .catch(err => {
        console.log(err)
      })
    )
  }

  render() {
    const {movies} = this.state;
    console.log({movies});
    return (
      <div className={movies ? 'app' : 'app-loading'}>
      <h1>{movies ? this._renderMovie() : "Loading"}</h1>
      </div>

    );
  }
}

export default App;

what is different?

많이 헤맸다 코드를 좀 더 정확하게 자세하게 볼 필요성이 있음

qiita.rb

  _renderMovie = () => {
    const movies = this.state.movies
    movies.map(movie =>
      <Movie 
      title={movie.title} 
      poster={movie.small_cover_image} 
      key={movie.id} 
      />
    )
    return movies; // map으로 돌린것을 return 하는것이 아니다.
  }

  _renderMovie = () => {
    const movies = this.state.movies.map(
      movie =>
          <Movie 
          title={movie.title} 
          poster={movie.small_cover_image} 
          key={movie.id} 
          />
    )
    return movies; // map으로 돌린것을 리턴함
  }