[4팀 김도현] Chapter3-2. 디자인 패턴과 함수형 프로그래밍 그리고 상태 관리 설계

[kimzeze]

배포링크

https://kimzeze.github.io/front_7th_chapter3-2/advanced/
https://kimzeze.github.io/front_7th_chapter3-2/basic/

과제의 핵심취지

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

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

과제 셀프회고

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

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

Props 분리 기준 세우기

어떤 props를 남기고 어떤 props를 제거할지 기준을 세우는게 고민이었습니다.

남긴 props (도메인 데이터)

• ProductCard의 product - 어떤 상품인지 명시
• CartItem의 item - 어떤 장바구니 아이템인지 명시
• ProductList의 searchTerm - UI 상태

제거한 props (콜백 핸들러, 파생 데이터)

• onAddToCart, onRemoveFromCart - hooks에서 직접 호출
• remainingStock - hooks에서 계산
• selectedCoupon - 전역 상태에서 직접 참조

결론적으로 "이 컴포넌트가 뭘 렌더링하는지 명시하는 데이터"는 props로 남기고, "어떻게 동작하는지"는 전역 상태와 hooks로 처리하는 방향으로 정리했습니다.

폴더 구조

src/advanced/
├── atoms/          # Jotai 전역 상태 (도메인별 분리)
├── hooks/          # 커스텀 훅 (Adapter 패턴)
├── models/         # 순수 계산 함수 (비즈니스 로직)
├── features/       # 도메인별 컴포넌트
│   ├── cart/
│   ├── product/
│   ├── coupon/
│   ├── order/
│   └── admin/
├── pages/          # 페이지 컴포넌트
├── components/     # 공통 UI 컴포넌트
├── constants/      # 상수, 초기값
└── utils/          # 유틸리티 함수

atoms → hooks → features 순서로 의존성이 흐르도록 구조를 잡았습니다.

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

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

이번 주는 시간이 부족해서 도저히 할 수가 없었는데... 아무것도 하지 않는게 너무 마음이 좋지 않아 목요일 퇴근 이후 급하게 시작해서 진행하였습니다. 시작할 때 큰 가이드를 먼저 주고 먼저 결정해야될 사항에 대해서 질문을 계속 주고받는 형태로 진행하였습니다.
코드 스타일이나 그런 부분에 대해서는 미리 사용하던 파일을 사용하여 빠르게 적용할 수 있었습니다.
이번 주 과제 주제가 평소에 관심이 많았으나 부족하다고 생각했던 내용이라 충분히 생각을 하면서 하지 못한 점이 너무 너무...아쉽습니다.
아쉬운 마음에 쏙쏙 함수형 프로그래밍 책이라도 당장 구매했습니다... 다음에 이렇게 제출했던 내용을 다시 보면서 조금이나마 도움이 되었으면 하는 마음입니다..!