React Js - Container Presenter Pattern

• props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다.

• state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다.

React Js - Container Presenter Pattern

• 리엑트 컴포넌트 코딩 패턴

  • index.js 에서 Container.js Import

  • Container.js

    prop, state 를 통해 받은 데이터를 Presenter.js로 리턴한다.

  • Presenter.js 넘겨 받은 데이터를 출력 한다

• 폴더 구조

• 사용

  Home/index.js

   import HomeContainer from "./HomeContainer";
   ​
   export default HomeContainer;

  Home/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
       };
   ​
   ​
       // 리액트 라이프 사이클
       // 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드
       // 이 안에서 다른 JavaScript 프레임워크를 연동하거나, setTimeout, setInterval 및 AJAX 처리 등 처리
       async componentDidMount(){
   ​
           try{
              // 비구조화 할당 
              // moviesApi.nowPlaying 안에 data 객체 안에 results 를 가지고와서 nowPlaying 변수명으로 저장
              const {data: {results: nowPlaying}} = await moviesApi.nowPlaying();
              const {data: {results: upcoming}} = await moviesApi.upcoming();
              const {data: {results: popular}} = await moviesApi.popular();
   ​
              // moviesApi 로 부터 받은 데이터를 State에 set한다.
              // this.nowPlaying = nowPlaying 의 ES6 문법
              this.setState({
                  nowPlaying,
                  upcoming,
                  popular
              });
           }catch{
               this.setState({
                   error: "영화 정보를 찾을 수 없습니다"
               });
           } finally{
               this.setState({
                   loading: false
               });
           }
       }
   ​
       // 비구조화 할당으로 state의 파라미터를 가져와서 HomePresenter로 리턴해준다
       // state가 없데이트 될때마다 render 는 계속 호출된다.
       render() {
   ​
           console.log("4",this.state);
   ​
           // componentDidMount 에서 state에 저장한 값을 가지고 온다.
           const { nowPlaying, upcoming, popular, error, loading } = this.state;
   ​
   ​
           return (
               <HomePresenter
                   nowPlaying={nowPlaying}
                   upcoming={upcoming}
                   popular={popular}
                   error={error}
                   loading={loading}
               />
           );
       }
   }

  Home/HomePresenter.js

   import React from "react";
   import PropTypes from "prop-types";
   import styled from "styled-components";
   ​
   // 변수 생성
   const DetailPresenter = ({result,
       error,
       loading}) => null;
   ​
   ​
   // Container 로 부터 받아오는 props
   DetailPresenter.propTypes = {
       result: PropTypes.object,
       loading: PropTypes.bool.isRequired,
       error: PropTypes.string
   };
   ​
   export default DetailPresenter;

출처 : https://academy.nomadcoders.co/