[6팀 손유민] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍 #24
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Comment on lines
+58
to
+61
| useEffect(() => { | ||
| const cartTotal = calculateTotal(); | ||
| setSummary(cartTotal); | ||
| }, [selectedCoupon, cart]); // selectedCoupon 또는 cart 변경 시 재계산 |
There was a problem hiding this comment.
Summary를 state로 관리하지 않아도 될 것 같아요 ㅎㅎ
selectedCoupon과 cart의 데이터가 변했을 때 다시 재산하는 것을 목적으로 추가한 것 같아 보여요
useEffect를 사용하지 않아도 selectedCoupone과 cart가 변경되면 다시 렌더링 되면서 caluateTotal을 다시 호출하여 계산이 됩니다.
그래서 const summary = calutateTotal() 로 작성하면 useState와 useEffect 제거하여 더 읽기 쉬운 코드가 될 것 같습니다~!
| const filteredItems = useMemo(() => { | ||
| if (!searchTerm) return items; | ||
| return items.filter((item) => | ||
| String(item[filterKey]).toLowerCase().includes(searchTerm.toLowerCase()) |
|
전체적으로 컴포넌트를 관심사에 맞게 잘 분리하신게 좋은 것 같습니다 👍👍👍 |
Comment on lines
+12
to
+55
| export const ProductList = ({ products, onProductUpdate, onProductAdd }: AdminProductListProps) => { | ||
| const { openProductIds, toggleProductAccordion } = useProductAccordion(); | ||
| const { editingProduct, startEditing, stopEditing, updateProductField, setEditingProduct } = useEditingProduct(); | ||
|
|
||
| const [ newDiscount, setNewDiscount ] = useState<Discount>({ quantity: 0, rate: 0 }); | ||
| const [ showNewProductForm, setShowNewProductForm ] = useState(false); | ||
|
|
||
| // handleEditProduct 함수 수정 | ||
| const handleProductAdd = (newProduct: Product) => { | ||
| onProductAdd(newProduct); | ||
| }; | ||
|
|
||
| // 수정 완료 핸들러 함수 추가 | ||
| const handleEditComplete = () => { | ||
| if (editingProduct) { | ||
| onProductUpdate(editingProduct); | ||
| stopEditing(); | ||
| } | ||
| }; | ||
|
|
||
| const handleStockUpdate = (productId: string, newStock: number) => { | ||
| if (editingProduct && editingProduct.id === productId) { | ||
| const updatedProduct = updateProductStock(editingProduct, newStock); | ||
| setEditingProduct(updatedProduct); | ||
| onProductUpdate(updatedProduct); | ||
| } | ||
| }; | ||
|
|
||
| const handleAddDiscount = (productId: string) => { | ||
| if (editingProduct && editingProduct.id === productId) { | ||
| const updatedProduct = updateProductWithNewDiscount(editingProduct, newDiscount); | ||
| setEditingProduct(updatedProduct); | ||
| onProductUpdate(updatedProduct); | ||
| setNewDiscount({ quantity: 0, rate: 0 }); | ||
| } | ||
| }; | ||
|
|
||
| const handleRemoveDiscount = (productId: string, index: number) => { | ||
| if (editingProduct && editingProduct.id === productId) { | ||
| const updatedProduct = removeDiscountFromProduct(editingProduct, index); | ||
| setEditingProduct(updatedProduct); | ||
| onProductUpdate(updatedProduct); | ||
| } | ||
| }; |
There was a problem hiding this comment.
여기 Form 로직들을 훅으로 분리하고
submit이 된 경우 반복되는 코드인 onProductUpdate를 호출하면 UI와 로직을 완벽히 분리하고 더 깔끔한 코드가 완성이 될 것 같아요 !! 🥹
Comment on lines
+5
to
+10
| const [newCoupon, setNewCoupon] = useState<Coupon>({ | ||
| name: "", | ||
| code: "", | ||
| discountType: "percentage", | ||
| discountValue: 0 | ||
| }); |
There was a problem hiding this comment.
초기 객체값을 상수로 분리해서 관리할 수도 있을 것 같습니다 ㅎㅎ
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
기본과제
React의 hook 이해하기
함수형 프로그래밍에 대한 이해
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
심화과제
뷰데이터와 엔티티데이터의 분리에 대한 이해
엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
과제 셀프회고
과제에서 좋았던 부분
과제를 하면서 새롭게 알게된 점
과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문