Presentational & Container 디자인 패턴
Presental & Container 디자인 패턴이란, 로직을 수행하는 컴포넌트와 마크업을 통해 UI를 보여주는 컴포넌트가 분리된 패턴을 의미한다. 이 패턴이 가지는 특징은 아래와 같다.
- 앱의 기능과 UI에 대한 구분이 쉬워진다.
- 같은 state를 다른 container에게 props로 내려 상태를 공유할 수 있다.
- 로직 수행, 마크업을 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어나다.
(특히 마크업 변경에 매우 유연하다) - 동일한 마크업, 컨테이너 레이아웃(header, footer)는 반복해서 작성하지 않아도 this.props.children 으로 구현할 수 있다.
Presental 컴포넌트
- 사용자가 직접 보고, 조작하는 컴포넌트(UI와 관련)
- state를 직접 조작하지 않으며, container 컴포넌트가 내려준 prop의 함수에 의해 state를 변경한다.
그에 따라 useState, useCallback, 등 state 관련 훅이 없다. - 상태를 거의 가지지 않고, 상태를 가진다면 데이터에 관련한 것이 아니라 UI 상태에 관련한 것이다. (stateless)
- 종종, this.props.children을 통해 컴포넌트가 렌더된다.
Container 컴포넌트
- 어떻게 동작하는지, 어떤 로직을 수행하는지에 관련된 컴포넌트
- 마크업을 사용하지 않으며, 스타일을 사용하지 않는다.
- 주로 상태를 가지고 있다. (stateful)
- 데이터와 데이터 조작에 관한 함수를 만들고 현재 컴포넌트에 제공한다.
'Today I Learned' 카테고리의 다른 글
TypeScript를 사용하는 이유 (0) | 2023.11.26 |
---|---|
나의 첫 번째 팀 프로젝트 회고 (2) | 2023.11.22 |
웹 페이지 렌더링 방식 - CSR / SSR / SSG (0) | 2023.10.30 |
Ajax란? (2) | 2023.10.14 |
HTTP 요청 메소드 (0) | 2023.10.05 |