Presentational 컴포넌트와 Container 컴포넌트

리액트에서 가장 유명한 패턴인이자 가독성과 생산성을 고려한 방법인 프레젠테이션 컴포넌트와 컨테이너 컴포넌트에 대해 알아보려고 한다.

🔎 Presentational Components 와 Container Components 패턴으로 왜 나누는 걸까?

화면을 표현하는 부분(Presentational Components)와 데이터를 다루는 부분(Container Components)으로 나눠서 개발하는 패턴으로 재사용성과 유지보수의 장점이 있다.

 

📌 Presentational 컴포넌트

• 데이터 출력, 데이터 처리 능력은 없음, no logic
• DOM 마크업과 스타일 담당(UI)
• Redux와 관련 없음
• 부모 컴포넌트로부터 받은 Props인 데이터와 콜백(callback)을 사용

📌 Container 컴포넌트

• 데이터 처리 능력 있음, 동작(behavior) logic, API Request, Exception Error, setState... ETC ...
• Redux와 관련 있음
• 렌더링 되어야 할 데이터를 props로써 데이터 처리 능력이 없는 Presentational 컴포넌트로 전달

 

 

출 처 : 댄 아브라모프(Dan Abramov) 블로그
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Presentational and Container Components

 

 

✏️ 새겨두기
"되도록 컴포넌트를 작성하는 입장에서는 유지 보수하기 쉬운 코드를, 컴포넌트를 사용하는 사람 입장에서는 컴포넌트의 인터페이스를 쉽게 파악할 수 있는 코드를 작성하는게 좋다."

참고 문서: 실전 리액트 프로그래밍 [이재승 지음, 인사이트]