React - 컨테이너 프리젠터 패턴?

 

 

 

 

 

 

 

 

리액트로 코딩할때 디자인 패턴의 한 종류!

 

컨테이너(Container) : data와 state(상태값)를 가지고, api를 호출하고, 기타 모든 로직들을 처리한다.
(데이터를 받아와서 처리하는 것을 담당함)

프리젠터(Presenter) : 컨테이너가 처리한 데이터들을 화면에 뿌려주는 역할을 하는 함수형 컴포넌트
프리젠터는 state(상태값), api, 클래스 등을 다루지 않는다.
(데이터를 화면에 뿌려주고 스타일을 담당함)

 

이런식으로 구성함!

 

HomePresenter.js : 스타일 담당, Container.js 로 export

HomeContainer.js : 각종 로직 담당, Presenter로 처리한 데이터(prop 등) 넘겨줌, index.js 로 export

index.js : 컴포넌트를 폴더로 구성했기때문에 작성해주는 파일, Route들을 import 하는 파일에서 

import Home from "Routes/Home";

이런식으로 import 하면 node는 자동으로 Home 폴더의 index.js 파일을 찾는다!

(폴더 자체가 하나의 컴포넌트가 되는거임!)