[React] 디자인 패턴과 함수형 프로그래밍

이번 과제는 React에서 클린하지 못한 코드를 가지고 액션과 순수함수의 분리, 함수형 프로그래밍에 대한 이해, 엔티티를 다루는 상태와 그렇지 않은 상태의 차이를 느껴보는 시간이였다.

 

이번 과제는 난이도가 높다하면 매우 높아지고 쉽다고만 생각하면 너무 쉬울법한 과제였다.

 

내가 제대로 이해하는 바가 있다면 어렵지 않을것이고..

내가 애매하게 알고있다면 매우 애매해지는 상황이 많기 때문이다.

 

물론 나는 후자였다.

 

셀프 회고

일단 과제에서 cart, products, coupon 세 가지가 주요 도메인으로 보였다. 그래서 이 세 가지를 단순하게 커스텀 훅으로 분리하였고, 해당 훅에서 상태관리 및 액션함수등을 작성했다.

 

그 다음 UI컴포넌트를 분리하고.. 최상단에서 위 커스텀훅들을 사용해 상태와 액션들을 props로 내려줬다. (기본 과제가 전역상태관리를 사용하지 않고 props로만 내려주고, 심화 과제에서 전역상태를 사용해 props를 제거하는 미션이 있었기 때문에 이렇게 진행했다.)

 

여기까지 나는 너무 단순하게 생각했던 것 같다.

이렇게 하면 그저 코드만 이쪽 저쪽에 분리시켰을 뿐이지, 차이가 하나도 없었다.

그래도 챙긴거라면 "가독성"이 좀 더 높아졌다는 것이다.

 

그러다 우연치않게 같은 조원인 아름님의 코드를 보았는데, 좀 놀라웠다.

나는 전혀 생각치 않던 관심사 분리까지 해둔 코드를 보니 너무 깔끔하고 테스트에 대한 용이성까지 챙겨진 모습이였다.

나는 커스텀훅에서 상태와 그 상태에 대한 액션함수까지 정의했는데, 액션에 대한 부분을 따로 모델이라는 이름으로 빼낸것이다.

사실상 커스텀훅은 상태관리만 책임지고  실제 행위에 대한 함수들이 따로 빠져있어서 순수한 형태로 존재했다.

 

이렇게 하니 관심사가 명확해졌고, 테스트가 용이하며 여기서는 재사용하지 않았지만 재사용성도 향상될 것으로 보였다.

 

 

그리고 난 후.. 나는 좀 더 과한 생각을 했다.

핸들러또한 UI에서 필요하지 않지 않을까? 핸들러 훅을 만들어서 분리시키면 더 좋지 않을까..?

 

그래서 나는 다음과 같은 데이터 흐름을 가져갔다.

User Interaction
      ↓
UI Components (pages/components)
      ↓
useAppCore (앱단에 집중된 훅)
      ↓
Handler Hooks (hooks/useXXXHandlers.ts)
      ↓
Entity Hooks (entities/useXXX.ts)
      ↓
Models (entities/xxx.model.ts)
      ↓
순수함수 & State Updates

 

일단 명확한 관심사 분리가 존재했다.

사용자 액션이 UI를 통해 발생할 것이고, 그것이 핸들러를 통해 엔티티 훅으로 전달되어 모델 액션 함수 및 순수함수들을 거쳐 상태가 업데이트 되는 방식인 것이다.

 

그러나 나는 이것이 과도한 재포장이라고 생각이 든다.

특히 핸들러는 오히려 프롭스만 더욱 증대시켰고, 이것은 어차피 UI에 연결되어야 하는것이고, 내가 예측해서 만들기 어렵기 때문에 굳이 핸들러 훅이 필요한가? 하는 생각이 들었다.

 

요약하면

UI컴포넌트 분리, 엔티티 상태 분리, 액션 함수 분리, 순수 util함수 분리 정도만 이뤄내고 핸들러는 UI컴포넌트에 정의되어 있는것이 더 깔끔하지 않나 하는 생각이 들었다.

 

어차피 액션은 프롭스로 내려올테고, 내가 UI컴포넌트에서 직접 적절한 액션함수를 받아서 이벤트에 대한 액션만 넣어주면 된다는 말이다.

 

이번 회고는 이 부분이 너무 아쉬워서 이것만 작성한다.. 사실 다른 부분들도 약간 아쉬운부분이 있는데, 그것은 내가 놓치거나 급하게 한 부분이지만, 오늘 작성한 위 문제는 내가 생각한 방향대로 흘러가지 않았음을 피드백 하는 것이기 때문이다..