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 # 애플리케이션의 엔트리 포인트
└── ...
예제 프로젝트를 하나 만들어서 해보자.