[9주차] Presentational & Container 디자인 패턴이란?

📌 Presentational & Container 디자인 패턴에 대해 설명해 주세요.

---

👩‍💻 Presentational & Container 디자인 패턴이란?

• 로직을 위한 컴포넌트와 UI(view)를 위한 컴포넌트를 분리한 패턴
• → 관심사를 2개로 분리한 것!
• container 내에 데이터를 props를 통해 다른 컴포넌트에 전달한다.
• view 로직의 분리를 통해 컴포넌트의 재사용성을 극대화시킨다.

💄 Presentational 컴포넌트

• UI와 관련된 컴포넌트
• state를 직접 조작하지 않는다.
• state 관련 훅을 사용하지 않는다.
• container 컴포넌트로부터 받은 props를 통해 로직을 구현한다. → 순수하다.
• 다른 맥락과 독립적으로, 재사용하기 쉽게 설계한다.

🔧 Container 컴포넌트

• 어떻게 동작하고, 어떤 로직을 수행하는지와 관련된 컴포넌트
• markup을 사용하지 않는다.
• 스타일을 사용하지 않는다.
• 데이터와 데이터 조작에 관련된 함수를 만든다.
• 순수하지 않다.
  • 다른 컨텍스트의 영향을 받을 수 있고,
  • 다른 상태에 영향을 줄 수도 있다.