프레젠테이션/컨테이너 컴포넌트

출처 : blueshw.github.io/2017/06/26/presentaional-component-container-component/

프레젠테이션 컴포넌트

• 어떻게 보여지는지와 관련있다.
• 프레젠테이션 컴포넌트와 컨테이너 컴포넌트가 모두 그 안에 들어가 있을것이고, 일부 DOM마크업과 스타일도 가지고 있다.
• 종종 this.props.children을 통해 노출된다.
• flux 액션이나 stores 등과 같은 앱의 나머지 부분들에 의존적이지 않다.
• 데이터를 가져오거나 변경하는 방법에 대해서 관여할 필요가 없다.
• props를 통해 배타적으로 callback 함수와 데이터를 받는다.
• 상태를 거의 가지고 있지 않다.
• 만약 상태, 생명주기, hooks, 또는 퍼포먼스 최적화가 필요없다면, 유틸함수로서 쓰여질 것이다.
• 예를 들면 페이지, 사이드바, 스토리, 유저정보, 리스트 등

컨테이너 컴포넌트

• 어떻게 동작하는지와 관련있다.
• 프레젠테이션 컴포넌트와 마찬가지로 프레젠테이션 컴포넌트와 컨테이너 컴포넌트 모두 가지고 있지만 감싼 divs를 제외하고는 DOM마크업을 가지고 잇지 않는다.
• 데이터와 기능(행동)을 프레젠테이션 컴포넌트와 다른 컴포넌트에 제공한다.
• Flux(or Redux) 액션을 호출하고, 프레젠테이션 컴포넌트에 콜백함수로써 제공한다.
• 데이터 소스 역할을 하기 때문에 상태가 자주 변경된다.
• 예를들면 유저페이지, 팔로워 사이드바, 스토리 컨테이너, 팔로우한 유저 리스트 등.

이 방법의 장점

• 앱(기능)과 UI에 대한 구분을 이해하기가 더 수월하다.
• 재사용성이 더 뛰어나다. 완전히 서로 다른 상태값과 함께 같은 프레젠테이션 컴포넌트를 사용할 수 있고, 재사용 될 수 있는 별도의 컨테이너 컴포넌트로 변경할 수 있다.
• 프레젠테이션 컴포넌트는 말하자면 앱의 팔레트와 같다. 앱의 싱글페이지 위에서 앱의 로직을 건드리지 않고 디자이너에게 모든 변화를 조정하게 할 수 있다.
• 이것은 사이드바, 페이징, 컨텍스트메뉴와 같은 레이아웃 컴포넌트를 추출하도록 할 것이고, 동시에 동일한 마크업이나 몇몇의 컨테이너 레이아웃을 반복해서 작성하는 대신 this.props.children을 통해서 구현될 수 있다.

예시 보면 이해가 쉽다.

예시 블로그

예시 블로그글 요약

• 버튼을 누르면 저장하는 FooterSaveButton 컴포넌트의 경우 저장에 대한 기능과 UI가 동시에 처리된다.
• 이 컴포넌트를 동작과 모습에 해당하는 역할을 분리시켜 FooterButton과 SaveButton으로 분리시키는 방식이다.
• SaveButton에는 저장에 대한 기능만을 갖는다. 저장에 대한 메서드를 FooterButton에 props로 넘겨주면 그 props를 사용하여 UI를 그리는 방식이다.
• FooterSaveButton은 동작과 모습이 강하게 연결되어 있어서 재활용 할 수 없지만 모습만을 정의한 FooterButton은 다른 동작을 가진 컨테이너에서 재황용 할 수 있다. 예를들어 resetButton 컨테이너에서 input값들을 초기화하는 리셋 메서드를 정의하고 FooterButton에 props를 넘겨줘서 완성할 수 있다. 이전의 방식으로는 FooterResetButton을 새로 만들어야할테지만 컨테이너/프레젠테이션 방식에선 ui에 해당하는 부분을 재사용할 수 있다.
• 게시판에 대한 예제도 있다. 하나의 컨테이너에 여러개의 프레젠테이션 컴포넌트를 사용함.