orderableProductItem 에 관하여...
57
작성한 질문수 6
강사님 안녕하세요 강의 잘 듣고 있습니다.
좋은 강의 감사합니다.
질문이 하나 있습니다.
OrderableProductItem 컴포넌트를 따로 만든다는 건 결국
base인 ProductItem 컴포넌트에 주문하기 버튼이 추가된 것인데,
따로 만들거라면 base 컴포넌트인 ProductItem은 진짜 기본적인 상품 정보만 보여주는 컴포넌트로 두고
buton 컴포넌트를 OrderaleComponentItem에서 렌더링 해주면서 order 로직도 여기에 두는 게 좋지 않나? 라는 생각이 들어서요!
답변 2
0
안녕하세요 컴포넌트 구조에 대한 질문을 주신것 같네요. 컴포넌트는 어플리케이션이 성장하면서 그 구조도 달라질수 있는데요. ProductItem과 OrderableProductItem을 이러한 관점으로 이해하시면 좋습니다.
상품 상세: ProductItem으로 상품 정보와 주문하기 버튼을 렌데링합니다. 이후 장바구니에서도 비슷한 UI를 렌더 하는데요. 상품 상세와 비슷해 ProductItem을 재사용하려는 판단에서 시작합니다.
장바구니: 상품상세에서는주문하기버튼이있지만장바구니에서는없어서이러한조건부렌더링을 ProductItem 역할로두었습니다. 상품상세에서는버튼까지렌더하도록조합할수있고요(onClick 전달). 장바구니에서는버튼이렌더되지않도록사용할수있게됩니다(onClick 생략). 마지막엔가독성을위해서이러한조합으로 OrderableProductItem이란컴포넌트를신설한것입니다.
0
안녕하세요, 인프런 AI 인턴입니다.
dev.mingyo님이 말씀하신 내용은 컴포넌트 구조화에 대한 질문으로 보입니다. OrderableProductItem 컴포넌트는 ProductItem 컴포넌트에 “주문하기” 버튼과 관련된 로직을 추가한 확장 버전이라고 볼 수 있습니다. 컴포넌트 구조를 어떻게 잡을지에 대한 고민은 리액트 개발 시 중요한 부분이며, 각각의 방식에는 장단점이 있습니다.
ProductItem과OrderableProductItem의 역할 분리:ProductItem컴포넌트를 기본 상품 정보만 표시하도록 분리하는 것은 컴포넌트의 재사용성을 높이는 데 유리합니다. 이렇게 하면ProductItem은 다양한 맥락에서 사용될 수 있습니다.
OrderableProductItem은ProductItem을 확장하여 “주문하기” 버튼과 주문 관련 로직을 추가한 형태로 사용하게 됩니다.
주문 로직의 적절한 위치:
- 주문 관련 로직을
OrderableProductItem내에 두는 것은 이 컴포넌트를 사용하는 곳에서 주문 관련 기능을 깔끔하게 분리하면서 유지관리와 확장성 면에서도 좋은 접근 방법입니다.
- 주문 관련 로직을
관련된 질문과 답변으로는 다음 링크를 참고하시면 도움이 될 것입니다:
- “React에서 컴포넌트를 설계하는 방식에 대한 고민”
- “컴포넌트의 역할과 분리를 어떻게 해야 하나요?”
이처럼 컴포넌트 구조는 사용자의 요구와 애플리케이션의 성장에 맞춰 유동적으로 결정될 수 있습니다. 다양한 접근 방식을 시도해보며 장단점을 평가해 보시는 것도 좋은 학습 방법이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
잘못된 useEffect 사용?
1
65
2
useEffect 의존성 질문
1
57
2
강의 자료, 블로그, 깃 주소
0
63
1
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
1
104
2
pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
1
87
2
FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유
1
123
1
dispatch 함수도 리렌더링 유발하지 않나요?
1
203
2
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
1
160
2
replaceState를 쓰지 않는 대안
1
196
2
setValue 메서드를 바인딩 해야 하는 이유
1
163
2
MyReact를 IIFE(즉시실행함수)로 설계하신 이유
0
208
2
[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교
0
129
1
useRef 관련하여 질문드립니다
0
152
2
렌더 프롭 관련하여 질문드립니다
0
183
2
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
1
395
2
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
1
317
2
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
1
355
2
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
1
281
2
[4.1장 레프 훅] useRef관련 질문이있습니다.
1
334
1
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
2
284
1
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
1
432
2
[1.3.6 상태정의] state 관련
1
259
1
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
1
272
1
[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.
1
425
2