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

[seunghoonKang]

과제의 핵심취지

• 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는 잘 제거했나요?

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

---

배포 주소 : https://seunghoonkang.github.io/front_7th_chapter3-2/

과제 셀프회고

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

1. model 계층

• models/ 폴더의 순수함수들을 작성하면서, 이것이 왜 필요한지에 대해 고민해봤습니다. 힌트: 모든 함수는 순수 함수로 구현 (부작용 없음, 같은 입력에 항상 같은 출력) 에서 알려주듯, 사이드 이펙트 없이 항상 같은 출력을 갖기 위한 함수는 어떻게 만들어야할까? 생각했습니다.

  const getMaxApplicableDiscount = (item: CartItem): number => {
    const { discounts } = item.product;
    const { quantity } = item;
    
    const baseDiscount = discounts.reduce((maxDiscount, discount) => {
      return quantity >= discount.quantity && discount.rate > maxDiscount 
        ? discount.rate 
        : maxDiscount;
    }, 0);
    
    const hasBulkPurchase = cart.some(cartItem => cartItem.quantity >= 10);
    if (hasBulkPurchase) {
      return Math.min(baseDiscount + 0.05, 0.5); // 대량 구매 시 추가 5% 할인
    }
    
    return baseDiscount;
  };

• 가령, 기존 작성돼있는 getMaxApplicableDiscount 함수의 경우 하나의 함수가 많은 역할을 한다 생각했습니다.
• 함수 내부에서 cart라는 외부 변수를 참조하며, 동일한 item을 인수로 전달하더라도 cart 변수의 내용이 변경되면 함수의 결과가 달라질 수 있습니다.
• baseDiscount로 기존 설정된 할인율이 적용되고, 10개 이상 대량 구매 시 추가 5% 할인이 되는 부분까지 있었습니다.

  /**
   * 상품의 기본 할인율 계산 (수량 기반)
   * @param item - 장바구니 아이템
   * @returns 기본 할인율 (0 ~ 1)
   */
  getBaseDiscount: (item: CartItem): number => {
    const { discounts } = item.product;
    const { quantity } = item;

    return discounts.reduce((maxDiscount, discount) => {
      return quantity >= discount.quantity && discount.rate > maxDiscount
        ? discount.rate
        : maxDiscount;
    }, 0);
  },

  /**
   * 대량 구매 보너스 할인율 계산
   * @param cart - 전체 장바구니
   * @returns 대량 구매 보너스 할인율 (0 또는 0.05)
   */
  getBulkPurchaseBonus: (cart: CartItem[]): number => {
    const hasBulkPurchase = cart.some((cartItem) => cartItem.quantity >= 10);
    return hasBulkPurchase ? 0.05 : 0;
  },

  /**
   * 적용 가능한 최대 할인율 계산
   * @param item - 장바구니 아이템
   * @param cart - 전체 장바구니 (대량 구매 체크용)
   * @returns 최대 할인율 (0 ~ 0.5, 최대 50%)
   */
  getMaxApplicableDiscount: (item: CartItem, cart: CartItem[]): number => {
    const baseDiscount = cartModel.getBaseDiscount(item);
    const bulkBonus = cartModel.getBulkPurchaseBonus(cart);

    // 기본 할인 + 대량 구매 보너스, 최대 50% 제한
    return Math.min(baseDiscount + bulkBonus, 0.5);
  },

• 각 함수는 각각의 입력값 item, cart이라는 명시적인 매개변수로 변경돼, 동일한 입력에 대해 항상 동일한 출력을 보장하는 순수 함수를 정의했습니다.

2. 계층 분리

• 이러한 model 계층의 분리는 명확한 책임을 나눌 수 있게 되며, 테스트하기 더 쉬운 작업이 된다는 것을 배웠습니다.

3. Jotai를 통한 상태관리의 효율성

• 기본과제에서는 props drilling이 불가피했지만, 심화과제에서 Jotai의 atom 기반 상태관리를 적용하면서 코드가 훨씬 깔끔해졌습니다. atomWithStorage를 사용하여 localStorage 연동도 자동으로 처리되고, totalItemCountAtom처럼 계산된 값도 쉽게 관리하는 방식을 써보았습니다.

이번 과제에서 내가 제일 신경 쓴 부분은 무엇인가요?

어디까지 분리하고, 어디까지 전역상태로 관리해야할까?

• 에 대해 고민했습니다.
• 기본 과제에서는 모든 훅의 내용을 App에서부터 props로 넘기는 작업을 하였다가, 심화 과제에 jotai라는 전역 상태 관리를 사용하며 모든 훅을 모든 전역상태로 빼야할까?
• 고민하다 결국 form 관련 훅은 따로 빼지 않기로 작업했습니다. 이는 각각의 탭(어드민, 카트) 일부에서만 사용하는 부분이고, props drilling이 심화되지 않는 부분입니다.
• 이렇게 저만의 기준을 생각하며 작성하게 됐습니다.

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

더 복잡한 로직에서의 적용

• 처음 1,000줄이라는 꽤나 복잡한 형태의 App 파일을 분류하며, 형태를 구현하고 있었습니다.
• 이를 분리하며 나름의 로직에 대해 이해하게 됐는데, 만약 더 복잡한 로직이나 컴포넌트가 있을 때도 잘 분류하고 사용할 수 있을까..? 스스로 의문이 듭니다.

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