#5 Container Presenter Pattern

API verbs,fuctions들을 화면 안에 넣는 작업

---

• Container Presenter Pattern이란?: 컨테이너는 data와 state(상태값)을 갖고, api를 불러옴, Presenter은 컨테이너에서 가져온 데이터를 화면에 뿌려줌(Presenter는 스타일이고, Container은 data)
  
  
  

• 각각의 폴더를 생성후 그안에 index.js파일과 Container, Presenter.js파일을 생성해줌(니코는 이런식의 구조가 좋다고함)
• index.js파일안에 HomeContainer.js을 import해줌
• HomeContainer.js에서 HomePresenter.js을 import해줌

• HomeContainer.js

import React from "react";
import HomePresenter from "./HomePresenter";

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

  // api 가져오고 error 처리하는 로직들 추가할 예정
  // HomePresenter로 바로 가는 모든 스테이트 값을 렌더링 할 예정

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

• HomePrsenter.js

export default () => "Home";