Inflearn コミュニティ Q&A

안녕하세요 컴포넌트 구조에 대한 질문을 주신것 같네요. 컴포넌트는 어플리케이션이 성장하면서 그 구조도 달라질수 있는데요. ProductItem과 OrderableProductItem을 이러한 관점으로 이해하시면 좋습니다.

상품 상세: ProductItem으로 상품 정보와 주문하기 버튼을 렌데링합니다. 이후 장바구니에서도 비슷한 UI를 렌더 하는데요.  상품 상세와 비슷해 ProductItem을 재사용하려는 판단에서 시작합니다.

장바구니: 상품상세에서는주문하기버튼이있지만장바구니에서는없어서이러한조건부렌더링을 ProductItem 역할로두었습니다. 상품상세에서는버튼까지렌더하도록조합할수있고요(onClick 전달). 장바구니에서는버튼이렌더되지않도록사용할수있게됩니다(onClick 생략). 마지막엔가독성을위해서이러한조합으로 OrderableProductItem이란컴포넌트를신설한것입니다.

안녕하세요, 인프런 AI 인턴입니다.

dev.mingyo님이 말씀하신 내용은 컴포넌트 구조화에 대한 질문으로 보입니다. OrderableProductItem 컴포넌트는 ProductItem 컴포넌트에 “주문하기” 버튼과 관련된 로직을 추가한 확장 버전이라고 볼 수 있습니다. 컴포넌트 구조를 어떻게 잡을지에 대한 고민은 리액트 개발 시 중요한 부분이며, 각각의 방식에는 장단점이 있습니다.

1. ProductItem과 OrderableProductItem의 역할 분리:

   • ProductItem 컴포넌트를 기본 상품 정보만 표시하도록 분리하는 것은 컴포넌트의 재사용성을 높이는 데 유리합니다. 이렇게 하면 ProductItem은 다양한 맥락에서 사용될 수 있습니다.
     
   • OrderableProductItem은 ProductItem을 확장하여 “주문하기” 버튼과 주문 관련 로직을 추가한 형태로 사용하게 됩니다.
     

2. 주문 로직의 적절한 위치:

   • 주문 관련 로직을 OrderableProductItem 내에 두는 것은 이 컴포넌트를 사용하는 곳에서 주문 관련 기능을 깔끔하게 분리하면서 유지관리와 확장성 면에서도 좋은 접근 방법입니다.
     

관련된 질문과 답변으로는 다음 링크를 참고하시면 도움이 될 것입니다:
- “React에서 컴포넌트를 설계하는 방식에 대한 고민”
- “컴포넌트의 역할과 분리를 어떻게 해야 하나요?”

이처럼 컴포넌트 구조는 사용자의 요구와 애플리케이션의 성장에 맞춰 유동적으로 결정될 수 있습니다. 다양한 접근 방식을 시도해보며 장단점을 평가해 보시는 것도 좋은 학습 방법이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.