React 디자인패턴 공부 - 1. 컨테이너와 프리젠터

참고한 자료: https://burning-camp.tistory.com/84#%EC%BB%A-%ED%--%-C%EC%-D%B-%EB%--%--%--%ED%--%--%EB%A-%AC%EC%A-%A-%ED%--%B--container-presenter-%--%ED%-C%A-%ED%--%B-

- 컨테이너와 프리젠터(container-presenter) 디자인 패턴은 비지니스 로직과 뷰를 분리하는 방식이다. MVC 패턴과 유사함을 느낄 수 있다.

컨테이너 프리젠터 패턴이란?
- 컨테이너는 data와 state를 가지고, api를 불러온다. 그리고 모든 로직을 처리한다.
- 프리젠터는 데이터를 보여줄 뿐이며, state를 갖고 있지 않은 단순한 함수형 컴포넌트이다.
- 프리젠터는 스타일, 컨테이너는 데이터의 개념을 갖고 있다.

index.js는 모든 페이지에서 만들어져 있어서 default로 export 시킨다. 
즉, 1개의 페이지 구성은 index, container, presenter로 이루어져 있다.

1) Container : Presenter을 import해서 component의 data나 로직을 보여주는 데에 쓴다.(render()에 삽입하는 형태)
이때 데이터, 함수는 props로 내려보낸다.

export default class extends React.Component {
  state = {
    nowPlaying : null,
    upcoming : null,
    popular : null,
    error : null,
    loading: true,
  };
  
  render() {
    const { nowPlaying, upcoming, popular, error, loading } = this.state;
    return (
    <HomePresenter
      nowPlaying = {nowPlaying}
      upcoming = {upcoming}
      popular = {popular}
      error = {error}
      loading = {loading}
      />
    );
  }
}

2) Presenter : container에서 넘겨준 props를 사용해 뷰를 만든다.

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

import Section from "Components/Section";

const Container = styled.div`
  padding: 0px 10px;
`;

const HomePresenter = ({ nowPlaying, popular, upcoming, error, loading }) =>
  loading ? null : (
    <Container>
      {nowPlaying && nowPlaying.length > 0 && (
        <Section title="Now Playing">
          {nowPlaying.map((movie) => movie.title)}
        </Section>
      )}
      {upcoming && upcoming.length > 0 && (
        <Section title="Upcoming Movies">
          {upcoming.map((movie) => movie.title)}
        </Section>
      )}
      {popular && popular.length > 0 && (
        <Section title="popular Movies">
          {popular.map((movie) => movie.title)}
        </Section>
      )}
    </Container>
  );

HomePresenter.propTypes = {
  nowPlaying: PropTypes.array,
  popular: PropTypes.array,
  upcoming: PropTypes.array,
  error: PropTypes.string,
  loading: PropTypes.bool.isRequired,
};

export default HomePresenter;

즉, index.js에서는 container을 import하고, conatiner에서는 presenter을 import한다.
이렇게 하면 코드의 재사용성이 올라가며, 캡슐화가 가능해진다.