2022년 B5 감상문

상태관리 이 전쟁을 끝내러 왔다

팀: 메가테라

발표자님: 최수형

 

한 줄 소감

발표 내용과 별개로 발표를 라이브코딩으로 진행했다는 점과 TDD를 빠르게 보여주신 점이 굉장히 멋있다는 생각이 들었고, 이전부터 헷깔렸단 store와 model간의 관계에 대해 조금 짚어주신 것 같아 좋았습니다.

 

이번 포스팅은 저번에 올렸던 최수형님의 발표인 2020년 A5보다 먼저 작성된 글입니다. (포스팅은 더 늦게 했습니다..😅)

 

 

발표 내용

발표 제목만 보고 상태관리에 대한 내용인 줄 알았지만, 실제 내용은 전체적인 UI 코드와 비즈니스 로직의 분리 방법에 대한 내용이었습니다.

 

거대한 컴포넌트 어찌할 것인가?

개발을 하다보면 불어난 컴포넌트의 크기를 감당하지 못하고 로직 자체가 복잡해질 수 있습니다.

컴포넌트의 크기가 커지는 이유는 UI와 Business Logic을 제대로 나누지 않게 되어서인데, 이 business logic과 UI가 어떤 관계로 이루어졌는지도 다시금 새겨주셨습니다.

소개해주신 방법은 model과 store간의 역할 분리를 통해 각각이 해야할 일들을 나누어 줌으로써 한 파일 안에서 점차 거대해질 수 있는 코드의 양을 줄이는 것이었습니다.

그 동안 컴포넌트 UI 개발만 몰두하게 되어 전역 상태관리나 model 관리에 대한 로직을 생각해본 적이 없는데, 이번 발표를 통해 다시 한 번 아키텍처나 패턴들을 다시 공부해봐야겠다는 생각이 들었습니다.

 

기억에 남는 부분

가장 기억에 남은 부분은 “저는 TDD를 하기 때문에 test결과가 성공으로 나오면 거침없이 리팩토링을 할 수 있다”는 것이엇다. 발표를 맡으신 최수형님은 작년에 프론트엔드도 TDD가 가능하다는 것을 보여드리겠습니다 라는 주제로 발표를 해주셨었는데, 해당 강의도 얼른 들어보고 싶다는 생각이 들었습니다. 그리고 발표 도중 DDD라는 주제도 알게 되서 한 번 공부해 봐야 될 것 같다.

 

알게 된 점

• React는 UI에 대한 처리를 중점으로 두고 있다. 비즈니스로직은 React 외부 영역에서 처리해야 한다.
• 비즈니스 로직에 대한 처리를 담당하는 것은 전역 상태 관리 도구들이다.(redux, recoil 등등)
• 전역 상태 관리 도구들은 React 입장에서는 External Store이다(External이지만 소프트웨어 관점에서는 매우 안쪽에 있다.). UI는 쉽게 바뀌고 재사용성이 낮아 테스트하기 어렵다. 하지만, Store는 외부 의존이 적은 순수한 자바스크립트에 가깝기 때문에 테스트하기 쉽다.
• react를 External Store와 연결하기 위해 useSyncExternalStore라는 hook을 제공해준다. useSyncExternalStore가 publisher, subscriber 패턴에 대한 로직을 처리해주는? 기능을 해준다. ← 자세히 한 번 알아보면 좋을 것 같다.
• store는 비즈니스 로직의 진입점이다. 실제적인 비즈니스 로직은 도메인 모델에서 정의해둔다. model는 그 로직을 가져다 쓰는 형태로 운용을 한다.

 

 

영상 링크: https://www.youtube.com/watch?v=KEDUqA9JeIo&t=157s