[1팀 천진아] Chapter3-2. 디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계

[totter15]

배포링크

https://totter15.github.io/front_7th_chapter3-2/index.advanced.html

과제의 핵심취지

• React의 hook 이해하기
• 함수형 프로그래밍에 대한 이해
• 액션과 순수함수의 분리

과제에서 꼭 알아가길 바라는 점

• 엔티티를 다루는 상태와 그렇지 않은 상태 - cart, isCartFull vs isShowPopup
• 엔티티를 다루는 컴포넌트와 훅 - CartItemView, useCart(), useProduct()
• 엔티티를 다루지 않는 컴포넌트와 훅 - Button, useRoute, useEvent 등
• 엔티티를 다루는 함수와 그렇지 않은 함수 - calculateCartTotal(cart) vs capaitalize(str)

기본과제

• Component에서 비즈니스 로직을 분리하기

• 비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기

• 뷰데이터와 엔티티데이터의 분리에 대한 이해

• entities -> features -> UI 계층에 대한 이해

• Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?

• 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?

• 계산함수는 순수함수로 작성이 되었나요?

• Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?

• 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?

• 계산함수는 순수함수로 작성이 되었나요?

• 특정 Entitiy만 다루는 함수는 분리되어 있나요?

• 특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?

• 데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?

심화과제

• 이번 심화과제는 Context나 Jotai를 사용해서 Props drilling을 없애는 것입니다.

• 어떤 props는 남겨야 하는지, 어떤 props는 제거해야 하는지에 대한 기준을 세워보세요.

• Context나 Jotai를 사용하여 상태를 관리하는 방법을 익히고, 이를 통해 컴포넌트 간의 데이터 전달을 효율적으로 처리할 수 있습니다.

• Context나 Jotai를 사용해서 전역상태관리를 구축했나요?

• 전역상태관리를 통해 domain custom hook을 적절하게 리팩토링 했나요?

• 도메인 컴포넌트에 도메인 props는 남기고 props drilling을 유발하는 불필요한 props는 잘 제거했나요?

• 전체적으로 분리와 재조립이 더 수월해진 결합도가 낮아진 코드가 되었나요?

과제 셀프회고

진행순서

1) 큰 단위의 구조 분리

- Header
- Notification
- AdminPage
- ProductPage

눈에 보이는 UI를 기준으로 먼저 분리가능한 단위를 크게 쪼개고 시작을 했습니다.

2) 주요상태(데이터) 정리

• 페이지 분리를 토대로 각 페이지에서만 사용하는 함수를 App에서 해당 페이지로 이동
  => App에서 한뭉치로 보이는게 아니어서 코드 파악하기 더 수월해졌던것 같습니다.

메인으로 사용되는 주요 data는 products, cart, coupons, notifications 인것 같습니다.
각 데이터와 이런 데이터를 변경시키는 함수를 정리하면 아래처럼 정리할 수 있었습니다.

products 
	- addProduct
	- updateProduct
	- deleteProduct
cart
	- addToCart
	- removeFromCart
coupons
	- addCoupon
	- deleteCoupon
notifications
	- addNotifications

3) 각 상태를 hook으로 분리
위에서 정리한 값들을 기반으로 데이터를 조작하는 함수(액션)들을 hook으로 만들어 주었습니다.

useProducts
	- addProduct
	- updateProduct
	- deleteProduct
	- updateProductStock

useCart
	- addToCart
	- removeFromCart
	- updateQuantity
 	- clearCart
	- calculateTotal
	- getRemainingStock
	- applyCoupon
	- deleteAppliedCoupon

useCoupons
	- addCoupon
	- deleteCoupon

useNotifications
	- addNotification
	- deleteNotification

4) 각 hook에서 계산 분리
현재 만들어진 hook들은 상태를 바꾸는 action 이기에 테스트하기 쉽게 내부의 로직을 계산으로 만들어 models로 분리 시켜주었습니다.

5) 각 컴포넌트 UI를 분리
컴포넌트를 하나의 역할/단위로 분리되는 것들을 기준으로 나눠주었습니다. Form, List, ListItem, Table등
엔티티를 사용하지 않는 공통 컴포넌트는 ui폴더에 분리해 주었습니다. 폴더구조에 대해서는 다음주차에 좀더 딥하게 다룰것같아 이번 과제에서는 라이트하게 분리를 하려 했습니다.

6) 상태관리를 통해 props drilling 제거
리액트로만 작업하고 싶어 상태관리 툴로는 useContext를 사용했습니다. 여러 계층에서 사용되는 cart, product, coupon, notification은 다른 계층에서 사용가능하도록 useContext를 이용해 분리시켜주었습니다.

과제를 하면서 내가 알게된 점, 좋았던 점은 무엇인가요?

기존에는 domain보다는 사실 UI를 기준으로 컴포넌트 분리를 많이 했던것 같습니다. 이전 발제에서 말씀하신것 처럼 다른 도메인이지만 비슷한 UI사용시 동일 컴포넌트를 사용했는데, 1회차, 2회차 과제를 통해서 UI기준으로 생각하는 방식 -> 계층, 도메인 기준으로 hook과 컴포넌트를 바라보게 된것 같습니다.

이번 과제를 통해 앞으로 해보고 싶은게 있다면 알려주세요!

회사에서 사용하는 코드들을 리팩토링해보면 좋을것 같습니다! 지금 회사코드가 UI와 로직들이 뒤섞여 있어서...파트별로 하나씩 리팩토링을 하면 좋을것 같습니다.

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)

1. CartPage의 handleApplyCoupon, handleAddToCart, handleUpdateQuantity함수가 절차적이라 느껴집니다. 이걸 개선하려면 이 함수들 또한 hook으로 분리해주는게 좋은 방법일까요? useCart => cart리스트에 대해 CRUD hook, useCartAction => useCart를 이용해 비지니스 요구사항 추가한 hook

2. 컴포넌트를 분리할때 사실 관성대로 나눈것 같은 기분이 듭니다... cartPage의 경우 역할이 있는것들 위주로 분리를 했는데 여전히 복잡하게 느껴지기도 합니다. 페이지의 구조가 더 잘 보일수 있으려면 장바구니 결제영역, 상품이 보이는 영역을 또한 나누는게 더 좋은 방법일까요?
   컴포넌트를 어느정도까지 분리를 하는게 맞을까요? 페이지단위에서 구조가 잘보일수 있도록...? 아니면 꼭 기능적으로 동작하는(form, table 같은..?) 단위로..?

3. notification은 entities라고 할수 있을까요? 데이터는 맞는것 같은데 이게 비지니스 데이터라 하기엔 모호한것 같은 기분이 듭니다...