container-presentation

container-presentation

 

 

Container(컨테이너) 란?

 

• 컴포넌트의 로직에 관한 대부분의 것들을 다룸
• 특히 API 호출, 데이터 조작, 이벤트 처리 등의 작업을 함
• 데이터와 데이터 조작에 관한 함수를 만들고 presentation에 제공함

 

 

Presentation(프리젠테이션) 란?

 

• UI에 표시할 요소를 만드는 부분
• state를 직접 조작하지 않고, container에서 내려준 props의 함수에 의해 state를 변경함
• 이에 따라, useState, useCallback, dispatch 등 state와 관련된 훅이 하나도 없음

 

 

container-presentation(컨테이너-프리젠테이션) 란?

 

• 로직을 수행하는 컴포넌트와 markup을 통해 UI를 보여주는 컴포넌트가 분리된 것
• 이에 따라 앱의 기능과 UI에 대한 구분이 쉬워짐
• 같은 state를 다른 container에게 props 내림으로 상태를 공유할 수 있음
• 따라서, 이렇게 구분을 하게되면 유지보수가 쉽고, 재사용성이 뛰어남

 

 

container-presentation 예시

 

└ container component

 

 

└ presentation component

 

 

└ index

 

 

container-presentation 장점과 단점

 

• 개발 속도와 프로젝트의 유지 관리 가능성에 이점이 있음
• 하지만, 아무런 이유 없이 이렇게 적용한다면 더 많은 파일과 컴포넌트를 만들게 되면서 버그가 발생할 수도 있고, 코드베이스가 복잡해질 수도 있음