19.12.05 리액트 디자인 패턴

React 디자인 패턴

Container + Presenter Pattern :

container 컴포넌트와 presenter 컴포넌트를 분리시킨 패턴

• container 컴포넌트는 논리 담당, logic과 api를 갖고 있고,
• presenter 컴포넌트은 UI 담당, 사진 등...을 갖고 있다.

ex) 홈 라우터를 예시로 보자

폴더 구조
Routes/Home/index.js
Routes/Home/HomePresenter.js
Routes/Home/HomeContainer.js

index.js (홈 라우터의 인덱스 파일은 홈컨테이너를 호출)

import HomeContainer from "./HomeContainer";

export default HomeContainer;

HomePresenter.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:null
    };

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

HomePresenter.js (보이는 화면)

export default () => "Home";