내멋대로 배워보는 React - 1 - Container-Presenter 패턴에 대한 정리 글

React를 어느정도 만들었다고 생각했는데, React도 패턴을 보니까 내가 만들던건 거의 원초적인 수준이더라.

 

알아보니 Container-Presenter 패턴에 대한 정리를 하기 위해서 내멋대로 이해한걸 글로 써본다.

 

우선 우리의 gpt께서는 다음과 같이 정리해줬다.

Container-Presenter 패턴과 Redux를 이용한 React 개발 방식은 코드의 구조와 유지 보수성을 개선하기 위해 사용됩니다. 이 방식은 크게 3부분으로 나뉘어 집니다: Container, Presenter, 그리고 Index.

 

설명 정의

1. Container

 - Container는 데이터와 비즈니스 로직을 담당함. (프론트엔드에서 백단 기능 관련 담당)

 - Redux이용하여 애플리케이션 상태를 관리함.

 - 로직 처리

 - Container는 Redux의 connect 함수를 이용해서 store에 접근하고, 상태와 액션 생성 함수를 props로 전달받아서 사용한다.

 

2. Presenter

 - Presenter는 UI 구성과 스타일링을 담당함. (프론트 뷰 부분 담당으로 생각함)

 - Container로부터 전달받은 props를 이용하여 UI렌더링을 하고, 사용자의 입력이나 이벤트 처리하여 Container에 전달함.

 

3. Index

 - Index 파일은 Container와 Presenter를 연결하고, 외부에 컴포넌트 제공하는 역할임.

 - 일반적으로 Index파일은 Container를 export한다.

 

4. Redux

 - Redux는 JavaScript 애플리케이션 상태 관리 라이브러리.

 - 액션, 리듀서, 스토어 등 개념을 통해서 상태 관리를 수행함.

 - 액션은 상태를 변경할때 발생하는 이벤트

 - 리듀서는 액션을 처리하여 새로운 상태를 생성

 - 스토어는 애플리케이션의 상태를 저장하고 관리하는 역할임.

 

글로 보면 솔직히 뭔내용인지 알다가도 모를만하다.

 

 

프로젝트의 폴더 정리는 다음과같이 하는걸 권장한다.

폴더 정리

src/
│
├── assets/                  # 이미지, 폰트 등의 자원을 저장하는 폴더
│
├── components/              # 재사용 가능한 UI 컴포넌트를 저장하는 폴더
│
├── containers/              # Container 컴포넌트를 저장하는 폴더
│   ├── SomeFeature/
│   │   ├── SomeFeatureContainer.js
│   │   └── index.js
│   └── AnotherFeature/
│       ├── AnotherFeatureContainer.js
│       └── index.js
│
├── presenters/              # Presenter 컴포넌트를 저장하는 폴더
│   ├── SomeFeature/
│   │   └── SomeFeaturePresenter.js
│   └── AnotherFeature/
│       └── AnotherFeaturePresenter.js
│
├── redux/                   # Redux 관련 파일을 저장하는 폴더 (옵션)
│   ├── actions.js
│   ├── reducers.js
│   └── store.js
│
├── utils/                   # 유틸리티 함수와 라이브러리를 저장하는 폴더
│
├── App.js                   # 메인 어플리케이션 컴포넌트
├── index.js                 # 애플리케이션의 엔트리 포인트
└── ...

 

예제 프로젝트를 하나 만들어서 해보자.