안녕하세요!
저도 부끄럽지만 실무에서는 써본적이 없어서 chatGPT에게 물어봤습니다 ㅎㅎ
렌더 프롭스 패턴 (Render Props Pattern)
사용 경향:
복잡한 UI 로직 공유: 여러 컴포넌트 간에 복잡한 로직을 공유하고자 할 때 주로 사용됩니다. 예를 들어, 데이터 페칭, 애니메이션, 폼 핸들링 등의 로직을 재사용하기 좋습니다.
높은 유연성 필요: 컴포넌트의 동작이나 렌더링을 매우 유연하게 커스터마이징 해야 할 때 유용합니다. 사용자는 렌더 프롭스 함수의 인자를 통해 다양한 렌더링 결과를 쉽게 제어할 수 있습니다.
상태 관리 및 공유: 상태를 여러 컴포넌트 사이에서 공유할 때, 특히 상태와 함께 여러 렌더링 옵션을 제공해야 할 경우에 사용됩니다.
---
컴파운드 컴포넌트 패턴 (Compound Components Pattern)
사용 경향:
복잡한 인터페이스 구성: 여러 하위 컴포넌트가 하나의 부모 컴포넌트와 함께 동작해야 할 때 사용됩니다. 예를 들어, 탭, 드롭다운, 모달 등 복잡한 UI 구성 요소에 적합합니다.
컨텍스트 사용: 부모 컴포넌트가 자식 컴포넌트들에게 공통된 상태나 메소드를 제공해야 할 때 유용합니다. 이를 통해 자식 컴포넌트들이 부모의 상태를 쉽게 접근하고 조작할 수 있습니다.
일관된 API 제공: 여러 컴포넌트가 서로 긴밀하게 협력해야 하는 경우, 컴파운드 컴포넌트 패턴을 통해 명확하고 일관된 API를 제공할 수 있습니다.
---
결론
렌더 프롭스 패턴: 높은 유연성과 로직 재사용이 필요한 상황에서 사용.
컴파운드 컴포넌트 패턴: 여러 하위 컴포넌트가 부모 컴포넌트와 긴밀하게 협력해야 하는 복잡한 UI 구성에서 사용.
라고 하네요!
도움이 되었으면 좋겠습니다!