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

[dev-learning1]

과제의 핵심취지

• 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 drilling 이라는 용어를 처음 알게되었고, 기존에는 처음에 개발하는 것에 급급해 대부분을 props로 진행하다가 나중에 2단계 이상요소에서 필요하게 되면 context/zustand로 상태관리로 변경하여 사용했었습니다. 그런데 이번 과제에 대해 고민하면서 프로젝트 초반에 이러한 것에 대해 고민을 한 후 진행을 하면 더 효율적일 것 같다라는 생각을 했습니다.

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

공통 컴포넌트와 페이지에서만 사용되는 컴포넌트 구분
예를 들어 상품을 나타내는 카드 컴포넌트를 만들어야 한다고 가정해보면...
카드 디자인, 즉 border, background color, font size/weight/color 등 일반적인 카드 디자인을 공통 컴포넌트로 만듬
( 이때, 공통 컴포넌트에서 관리하는 컴포넌트들은 cva, cn 을 사용하여 커스텀할 수 있도록 코드 작성 해야함)
공통 컴포넌트의 카드 컴포넌트를 커스텀하여 페이지에 사용되어지는 상품 카드 컴포넌트를 생성
상품 카드 컴포넌트는 해당 페이지폴더의 components폴더에서 관리
이렇게 하면 카드 형식의 요소들은 모두 동일한 디자인을 갖게 되므로 도메인 화면에 통일성을 줄 수 있을거라 생각했음
(실제로 좋은 방식인지는 모르겠어요...)

src/app/
├── pages/           
│   └── shop/
│    |    └── components/  → shop 페이지에서 다루는 컴포넌트(공통 컴포넌트를 커스텀, 순수 작업한 컴포넌트)
│    |    └── page.tsx     
│   └── admin/    
│    |    └── components/  → admin 페이지에서 다루는 컴포넌트(공통 컴포넌트를 커스텀, 순수 작업한 컴포넌트)
│    |    └── page.tsx     
│
└── components/         → 공통 컴포넌트
│   └──  card.tsx        → 커스텀할 수 있는 일반적인 카드 컴포넌트(cva, cn 을 사용하여 커스텀 가능할 수 있게 작성)
└── page.tsx 
└── layout.tsx 

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

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

1. 위에서 설명한 공통 컴포넌트와 각 페이지에 쓰이는 컴포넌트의 관리 방식이 좋은 방식인지 아직 잘 모르겠습니다. 다른 분들은 컴포넌트를 어떤 방식으로 구분하여 작업하시나요?
2. context로 상태관리하는 것보다 props 로 값을 전달받으면 좀 더 빠르게 반응할 수 있다고 들었는데 실제로 성능 이슈가 있나요? 아니면 단순히 계속 끌고 가야 하는 props에 의한 코드 결합 이슈 때문에 상태관리로 관리하는 것인가요? basic에서는 상태관리 없이 작업하다가 hard 부분에서는 상태관리를 사용하라고 하셨는데...크게 무슨 차이인지 정확히 모르겠습니다.(pr 마지막 하단에 결합도가 낮아졌는지에 대한 물음이 정확히 무슨 뜻인지 와닿지 않습니다)