search

modulersYJ / ganoverflow-front

2 stars 2 forks source link

chat recoil 관련 좋은 자료, 리팩에 참고해볼 것 #90

Closed ABizCho closed 1 year ago

ABizCho commented 1 year ago

https://techblog.yogiyo.co.kr/recoil%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%86%90%EC%89%AC%EC%9A%B4-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-b70b32650582

Recoil을 사용하면서 마주치는 문제: 예측하기 어려운 전역상태 변경

앞서 Recoil의 장점은 손쉬운 전역상태 관리라고 말씀드렸습니다.

어느 컴포넌트라도 전역상태에 직접 접근하여 상태를 업데이트할 수 있죠.

이 기능은 장점이면서 또 단점이기도 합니다. 왜냐하면, 어느 컴포넌트가 언제 전역 상태를 변경하는지 알 수 없기 때문입니다.

손쉬운 전역상태 관리 덕분에 빠르게 개발할 수 있지만 디버깅, 기능 변경이나 추가는 지금까지 어떻게 상태를 관리했는지에 따라 그렇게 빠르지 않을 수도 있습니다.

기능이 점차 추가되고 전역상태가 늘어나면서 여기저기서 상태를 업데이트하게 되면 점점 상태 변경을 예측하기가 어려워집니다.

이 예측 가능성을 달성하기 위해 Container/Presentational 패턴과 React의 custom hooks를 조합한 상태관리 방법을 소개 드리겠습니다.

Redux vs Recoil vs Context

https://medium.com/@davidkelley87/redux-recoil-and-react-context-api-choosing-your-state-management-adventure-67fb2355daa2

hongregii commented 1 year ago

recoil 사용의 문제점까지는 파악을 했는데, Container / Presentational 방법은 제대로 이해가 안되는것 같아요 Wrapper 컴포넌트에 몇가지 전역상태를 뿌리고 자식에 prop으로 넘겨주는 패턴인데, 어떤 장점이 있어서인건가요?

Preprocessing 과정을 거치는건 좋아보이긴 하는데, 그렇게 Wrapper를 사용하면 전역상태관리를 사용하는 게 아니라 사실상 Wrapper에서 state를 선언하고, 자식으로 Drilling 하는거랑 똑같지 않을까요?

만약 컴포넌트 트리가

물론 이렇게 D, F에서 공유해야 하는 상태가 여러개라면, 블로그에서 언급한 대로 Wrapper 지옥을 벗어나기 위해 Recoil을 쓰는게 낫겠지만요.

쓰다보니 약간 이해가 되는것 같기도..? 일단 성우님께서 리팩 적용 해 주시고 나서 코드가 깔끔해지면 구조는 다시 봐도 될 것 같네요! 그대로 진행해주시면 리뷰하겠습니다 @ABizCho

ABizCho commented 1 year ago

@hongregii

Preprocessing 과정을 거치는건 좋아보이긴 하는데, 그렇게 Wrapper를 사용하면 전역상태관리를 사용하는 게 아니라 사실상 Wrapper에서 state를 선언하고, 자식으로 Drilling 하는거랑 똑같지 않을까요?

이 말씀은 맞는 말씀이라고 생각해요! 사실 첫 커멘트로 남겼던 첫번째 참고자료를 아직 깊이 탐구해본게 아니라 단언할 수 없지만, 컨테이너,프레젠터 패턴은 전역상태사용에 대해서도 (불필요하다면 불필요한)드릴링을 발생시킬 수 있는 패턴이라고 생각합니다.

다만 처음에 언급한 리코일 사용성 개선을 떠나서라도, 챗페이지에 워낙 많은 UI코드와 로직코드가 담겨있기 때문에 뷰/로직 을 확실히 분리해서 관리하는 것이 게시판에서 재사용될 수 있는 뷰의 사용성을 더 높일 수 있을 뿐 아니라 유지보수도 훨씬 용이할 것이라고 생각해서 한번 진행해볼게요! (기존에는 getHandler패턴으로 이를 해소해보고자 했으나, 결국 state getter는 현재 뷰로 사용하고자 하는 컴포넌트에서 관리되고 있기 때문에 getter 관리포인트가 여전히 불편하게 산재돼있는 것 같습니다)

+

사실 이 이슈를 열때까지만 해도 리팩 후보정도로 참고용으로 기록해둔거였는데, 현재 #100, #97, 그리고 위에서 에서 말씀드린 것 처럼 container / presenter 패턴을 챗페이지에 적용해보고자 합니다!