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

[CreatyJohnKwon]

과제 체크포인트

기본과제

• React의 hook 이해하기

• 함수형 프로그래밍에 대한 이해

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

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

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

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

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

심화과제

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

• 엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해

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

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

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

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

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

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

과제 셀프회고

과제를 시작하면서

발제로 알 수 있는 이번 과제의 목표는

• 모든 소프트웨어에 적절히 존재하는 주요 계층에 따라 적절히 리팩토링 할 수 있다

여기서 React 의 주요 역할계층은 세 가지가 있다

• Hook (훅)
• Calc function (계산 함수)
• Component (컴포넌트)

각각 계층은 무슨 역할을 하는지 자세히 알아보자

1. hooks 에서는 리액트 훅을 사용해서 엔티티를 다룬다
   
2. utils 에서는 계산 로직이 포함 된 순수 함수만을 다룬다
   
3. components 에서는 hooks 와 utils 에 비지니스 로직을 맡기고
   합성 컴포넌트를 적절히 수행해 책임을 나눈다

최종 설계 단계

---

1. 커스텀 훅에서 데이터와 로직 분리 - 훅 계층
   • 상태 관리와 비즈니스 로직은 커스텀 훅에서 담당한다
   • map, filter, reduce 등의 메서드를 활용해 데이터를 변환하거나 조건에 따른 동작을 처리한다
2. UI 컴포넌트를 합성 컴포넌트 패턴으로 설계 - 컴포넌트 계층
   • UI 컴포넌트를 작은 단위로 나누고, Props를 활용해 데이터를 전달받아 렌더링한다
   • UI와 로직 간의 의존성을 제거한다
3. 부모 컴포넌트에서 데이터와 UI 조합 - 컴포넌트 계층
   • 커스텀 훅에서 데이터를 가져오고, UI 컴포넌트에 전달하여 상태를 표시한다
   • 자식 Props 으로 특정 UI를 부모에서 제어할 수 있도록 설계한다
4. 확장성과 재사용성을 위한 설계 - 훅 및 계산 함수 계층
   • 컴포넌트와 로직의 독립성
     • 특정 컴포넌트에서 사용하는 로직이나 이벤트를 대체하거나 확장 가능하다
     • 예시로 calculateDiscount 등은 특정 UI와 무관하게 독립적으로 동작하도록 설계한다

위 설계로 얻는 리팩토링 결과의 장점은

• 관심사의 분리: 데이터 관리, 로직, UI가 명확히 분리되어 유지보수가 용이하다
• 유연성: 자식 Props 패턴과 합성 컴포넌트로 UI 구성을 유연하게 제어할 수 있다
• 재사용성: 커스텀 훅과 컴포넌트가 독립적으로 설계되어 다양한 컨텍스트에서 재사용 가능하다
• 테스트 용이성: 상태 관리와 로직, UI를 독립적으로 테스트할 수 있다

과제에서 좋았던 부분

---

리팩토링 설계를 짜긴 했지만 사실 방향적으로만 그렇고, 구현은 중요 계층 3단계에 따라 코드를 분리 하려고 노력했다

가장 크게 느꼈던 부분은 계층 별 역할이 한 눈에 보이는 프로젝트로 완성 되었다

과제 막바지때는 모든 계층에서 각 장점들을 느낄 수 있었는데

• 계산 함수 : 순수 계산 함수의 인풋과 아웃풋이 명확한 목표를 가지고 있어서 테스트 코드를 작성하기가 수월했다
• 컴포넌트 : 비지니스 로직이 사라지니 어떤 책임을 가지고 있으면 좋을지 보여, 합성 컴포넌트으로 분리하기 수월했다
• 훅 : 전역으로 관리만 된다면 어디서든 데이터 바인딩과 반응이 가능하다는 것을 알게 되었다

리팩토링하며 느낀 경험으로 맞이할 프로젝트에 명확한 구조를 빚거나 효율적인 협업이 될 것 같다

과제를 풀며 겪은 문제점과 알게된 점

---

A 컴포넌트의 자식 컴포넌트인 B와 C에서 같은 커스텀 훅을 사용하려고 할 때,
useState의 setter와 getter를 각각 참조하려는 상황이 있었다

이 과정에서, A 컴포넌트에서 선언한 커스텀 훅을 B와 C에 Props로 전달해야 한다는 점이 번거롭고 비효율적이라고 느꼈다

또한 props drilling 이슈로 퍼질 수도 있는 문제이기도 하다

문제의 해결책을 고민해보고 나눈 결과,

커스텀 훅을 전역으로 관리하면 Props 전달의 복잡성을 줄일 수 있다

Context API나 Zustand와 같은 전역 상태 관리 도구를 사용하면,

커스텀 훅의 상태를 어디서든 선언적으로 사용할 수 있다는 점을 알게 되었다

전역으로 선언된 커스텀 훅은 Props를 통해 하위 컴포넌트로 전달하지 않아도 접근 가능하므로, 코드가 더 간결해진다

지식을 공유해주신 12/13/15팀 감사해요!

리뷰 받고 싶은 내용 (번외의 질문)

---

많은 분들에게 들어보고 싶은 번외의 질문입니다..!!

바로 "건강!"인데요,

항해를 시작하면서 밤을 꼴딱 새는 일이 많은데 정말 다음날에 숙취처럼 지장이 많이 가더라구요 집중도 안되고!!

가만히 앉아서 코드를 타이핑하는 것에 많은 시간을 할애 하는 것에 대해 어떻게 생각하시나요?