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

[Leehyunji0715]

https://leehyunji0715.github.io/front_7th_chapter3-2/index.advanced.html

과제의 핵심취지

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

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

과제 셀프회고

처음에 눈에 보이는 컴포넌트 위주로 분리했습니다! Admin, Cart 페이지로 크게 나누고 진행했는데요,
쪼개다보니 Entity 를 다루는 함수들/로직들이 분산되어 리팩토링 및 hook 분리 작업이 쉽지 않게 되었습니다.
그래서 origin에 있는 코드를 참고하면서 리팩토링/분리작업 시작했습니다.

왜 다들 작업을 작은 단위부터 하는지, 혹은 state 부터 분리를 하게되는지 알게 된 것 같습니다!
눈에 보이는것을 기준으로 작업하려는 함정에 빠지기 쉬운데, 그 유혹을 잘 참아야겠습니다..!!

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

• 지금까지 무작정 기준 없이 리팩토링을 진행했었습니다! 반복코드를 단순히 줄인다는 목적으로 지금껏 코드를 작성했습니다. 그러나 이번 발제를 통해 util과 비즈니스로직과 관련한 모델 함수/hook을 분리하는 기준, 눈이 생긴것 같습니다.
• 또 hook도 utils hook과 일반 entity hook으로 폴더를 분리하는 것을 보면서, 아 이렇게도 분리 가능하구나를 알게되었습니다!

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

• 데이터 -> 계산 -> 액션의 흐름을 유지하기
• 컴포넌트 내에서 하나의 hook으로 묶을 수 있는 액션은 무엇일까? 그 경계선을 생각하는 것

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

• 함수형 프로그래밍을 정말 맛보기만 한 것 같아요! 나중에 함수형 프로그래밍 책을 제대로 정독하고 좀더 지식을 강화시키고 싶다는 생각이 들었습니다 :)
• 컴포넌트도 무작정 구분없이 코드를 짜고 그랬는데, 컴포넌트 계층을 잘 구분해서 작업해보고싶다.

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