[ReactJS] Presentational 컴포넌트 vs Container 컴포넌트

출처 (이 글은 아래 글을 공부하며 요약 정리한 글입니다 + 주석)

redux.vlpt.us/1-2-presentational-and-container-components.html

 

리액트 창시자 Dan Abramov가 고안한 패턴이다

medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

 

다만 2019년도에 추가한 글로는 불필요한 곳에서 사용할 만큼 꼭 지켜야되는 것은 아니라고 설명하고 있다

이 구조에 대한 글을 쓴게 후회될 정도라고..(트위터글 참고 twitter.com/dan_abramov/status/802569801906475008)

 

프레젠테이셔널 컴포넌트

• View 만을 담당하는 컴포넌트이다 (UI를 작성한다)
• 이 컴포넌트 안에서는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 둘 다 사용할 수 있다
• 리덕스 스토어에 직접적으로 접근하지 않고 props로만 데이터, 함수를 가져온다
• 순수한 컴포넌트로 state를 사용하지 않으며 state가 있을 경우 데이터가 아닌 UI에 대한 state여야 한다.
• 주로 함수형 컴포넌트로 작성된다

 

컨테이너 컴포넌트

• 다른 프레젠테이션 컴포넌트나 컨테이너 컴포넌트를 관리한다
• 내부에 DOM 엘레멘트를 (UI) 작성하지 않는다 (사용하는 경우 감싸는 용도)
• 스타일을 가지고 있지 않는다
• 스타일은 모두 프레젠테이셔널 컴포넌트 내부에 정의되어야 한다
• 상태를 가지고 있고 리덕스에 직접 접근하여 데이터를 가져온다
• dispatch를 하는 함수를 여기서 구현한다

 

 

 

구조의 장점

• UI와 DATA 부분이 분리되어 관리하기가 쉽고 컴포넌트 재사용하기 좋다