[1팀 권준우] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍

.github/pull_request_template.md

@@ -7,21 +7,61 @@
 - Component에서 비즈니스 로직을 분리하기
 - 비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
 
-- [ ] Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
-- [ ] 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
-- [ ] 계산함수는 순수함수로 작성이 되었나요?
+- [x] Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
+- [x] 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
+- [x] 계산함수는 순수함수로 작성이 되었나요?
 
 ### 심화과제
 
 - 뷰데이터와 엔티티데이터의 분리에 대한 이해
 - 엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해
 
-- [ ] Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
-- [ ] 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
-- [ ] 계산함수는 순수함수로 작성이 되었나요?
-- [ ] 특정 Entitiy만 다루는 함수는 분리되어 있나요?
-- [ ] 특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
-- [ ] 데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
+- [x] Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
+- [x] 주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
+- [x] 계산함수는 순수함수로 작성이 되었나요?
+- [x] 특정 Entitiy만 다루는 함수는 분리되어 있나요?
+- [x] 특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
+- [x] 데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
+
+## 과제를 시작하면서
+어떻게 시작해야할까…?
+
+발제로 알 수 있는 이번 과제의 목표<br/>
+* 모든 소프트웨어에 적절히 존재하는 주요 계층에 따라 적절히 리팩토링 할 수 있다
+
+여기서 React 의 주요 역할계층은 세 가지가 있다
+* Hook (훅)
+* Calc function (계산 함수)
+* Component (컴포넌트)
+
+각각 계층은 무슨 역할을 하는지 자세히 알아보자
+1. hooks 에서는 리액트 훅을 사용해서 엔티티를 다룬다<br/>
+2. utils 에서는 계산 로직이 포함 된 순수 함수만을 다룬다<br/>
+3. components 에서는 hooks 와 utils 에 비지니스 로직을 맡기고<br/>합성 컴포넌트를 적절히 수행해 책임을 나눈다
+
+###### (지피티 첨가 버전)
+
+최종 설계 단계
+1. 커스텀 훅에서 데이터와 로직 분리 - 훅 계층
+    * 상태 관리와 비즈니스 로직은 커스텀 훅에서 담당합니다
+    * map, filter, reduce 등의 메서드를 활용해 데이터를 변환하거나 조건에 따른 동작을 처리합니다
+2. UI 컴포넌트를 합성 컴포넌트 패턴으로 설계 - 컴포넌트 계층
+    * UI 컴포넌트를 작은 단위로 나누고, Props를 활용해 데이터를 전달받아 렌더링합니다
+    * UI와 로직 간의 의존성을 제거합니다
+3. 부모 컴포넌트에서 데이터와 UI 조합 - 컴포넌트 계층
+    * 커스텀 훅에서 데이터를 가져오고, UI 컴포넌트에 전달하여 상태를 표시합니다
+    * 자식 Props 패턴으로 특정 UI를 부모에서 제어할 수 있도록 설계합니다
+4. 확장성과 재사용성을 위한 설계 - 훅 및 계산 함수 계층
+    * Render Props, Slot 패턴 등을 활용하여 더 유연한 UI 구성을 지원합니다
+    * 특정 컴포넌트에서 사용하는 로직이나 이벤트를 쉽게 대체하거나 확장할 수 있도록 설계합니다
+
+위 설계로 얻는 리팩토링 결과의 장점은
+* 관심사의 분리: 데이터 관리, 로직, UI가 명확히 분리되어 유지보수가 용이하다
+* 유연성: 자식 Props 패턴과 합성 컴포넌트로 UI 구성을 유연하게 제어할 수 있다
+* 재사용성: 커스텀 훅과 컴포넌트가 독립적으로 설계되어 다양한 컨텍스트에서 재사용 가능하다
+* 테스트 용이성: 상태 관리와 로직, UI를 독립적으로 테스트할 수 있다
+
+#### 이제 가장 먼저 커스텀 훅 로직을 만들어보자
 
 ## 과제 셀프회고
 
@@ -31,6 +71,13 @@
 
 ### 과제를 하면서 새롭게 알게된 점
 
+<!-- 스프레드 연산자
+// useProduct.ts
+ setProducts([...a, b]) 
+ 리액트에서 useState 훅 에 위 방법대로 배열 추가하는 방법은 가장 이상적이다
+ JS 원칙인 `불변성` 을 유지하면서 상태를 업데이트 하기 때문이다
+ -->
+
 ### 과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
 
 ## 리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문

package.json

@@ -28,9 +28,10 @@
     "@typescript-eslint/parser": "^8.10.0",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/ui": "^2.1.3",
-    "eslint": "^9.12.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.12",
+    "jsdom": "^26.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.9",
     "vitest": "^2.1.3"