리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴이다
view를 책임지는 Presentational Component와 동작을 책임지는 Container Component로 나누어서 재사용과 유지 보수성을 높이는데 도움을 준다
두 개의 컴포넌트들은 각각 다음과 같은 특성을 가진다
Presentational Component
- 어떻게 보여질지를 책임진다
- 내부에 Presentational Component와 Container Component 모두 가질 수 있다
- 대부분 DOM 마크업과 스타일을 가지고 있다
- 어플리케이션의 나머지 부분에 아무런 의존성을 가지지 않는다
- 데이터를 건드리는 작업은 일체하지 않고 필요한 데이터는 props로 받아오기만 한다
- UI상태를 관리하기 위해 state를 가질 수 있다
Container Component
- 어떻게 동작할 지를 책임진다
- 내부에 Presentational Component와 Container Component 모두 가질 수 있다
- 대부분 보여주기 위한 DOM 마크업이나 스타일은 가지고 있지 않다
- 데이터를 다른 컴포넌트에게 제공한다
- state를 활용한 데이터 저장소로 쓰인다
- 직접 작성되기 보다는 고차 컴포넌트에 의해 생성되는 경우가 많다
이 두 성질을 가진 컴포넌트들은 명확히 구분되어야 하기 때문에 보통 다른 디렉토리에 저장된다
장점
관심사의 분리가 쉽다
⇒ 컴포넌트를 두 가지로 분류한 만큼 UI와 데이터의 관심사 분리가 쉽다
재사용성을 높일 수 있다
⇒ 다른 Container Component 에서 온 데이터라 할지라도 같은 Presentational Component로 재사용하여 표현할 수 있다
언제 Container Component를 만들어야 할까?
앱을 제작할 때 Presentational Component를 먼저 작성해서 프로젝트를 진행하다가
많은 props들이 그저 아래로 전달되기 위해 컴포넌트를 거쳐가고 있다면 그때가 바로 Container Component를 추출할 때라고 일러주고 있다
'React' 카테고리의 다른 글
| 리덕스-미들웨어 만들기 (0) | 2021.02.16 |
|---|---|
| Redux 파일 구조 (0) | 2021.02.15 |
| 불변성 (0) | 2021.02.02 |
| Effect Hook (0) | 2020.11.18 |
| State Hook (0) | 2020.11.17 |
