#6 Presenters

Presenter 구조

• HomePresenter.js

import React from "react";
import ProTypes from "prop-types";
import styled from "styled-components";

const HomePresenter = (nowPlaying, upComing, popular, error, loading) => null;

HomePresenter.ProTypes = {
  nowPlaying: ProTypes.array,
  upComing: ProTypes.array,
  popular: ProTypes.array,
  error: ProTypes.string,
  loading: ProTypes.bool.isRequired
};

export default HomePresenter;

• HomeContainer.js

import React from "react";
import HomePresenter from "./HomePresenter";
import { moviesApi } from "../../api";

export default class extends React.Component {
  state = {
    nowPlaying: null,
    upcoming: null,
    popular: null,
    error: null,
    loading: true
  };

  async componentDidMount() {
    try {
      const {
        data: { results: nowPlaying }
      } = await moviesApi.nowPlaying();
      const {
        data: { results: upcoming }
      } = await moviesApi.upcoming();
      const {
        data: { results: popular }
      } = await moviesApi.popular;
      this.setState({
        nowPlaying,
        upcoming,
        popular
      });
    } catch (error) {
      this.setState({
        error: "Can't find movie information."
      });
    } finally {
      this.setState({
        loading: false
      });
    }
  }

  render() {
    const { nowPlaying, upcoming, popular, error, loading } = this.state;
    return (
      <HomePresenter
        nowPlaying={nowPlaying}
        upcoming={upcoming}
        popular={popular}
        error={error}
        loading={loading}
      />
    );
  }
}

 

• TV, Detail,SearchPresenter.js 파일에도 위와같은 구조로 작성해준다.