패턴으로 익히고 설계로 완성되는 리액트 - 실무 관점에서 바라보기

최관수·2025년 3월 28일
1

서평

목록 보기
14/19

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

영어 회화 공부에서 흔히 말하는 '패턴을 익혀서 생각 없이 말이 나오는 단계'처럼, 개발 구조나 패턴이 손에 익어야 유지보수나 확장이 수월해진다고 느꼈다. 물론 본질적으로 딥다이브를 통해 전체 구조를 온몸으로 이해하면 좋으나 그건 시간이 다소 필요한 부분이기도 해서 먼저 구조와 패턴에 익숙해지는 것도 나쁘지 않은 선택이라고 생각한다. 이 책은 그런 ‘손과 몸에 익는 구조’를 위해 실무 관점에서 React 개발자에게 필요한 개념과 패턴, 그리고 안티패턴을 구체적으로 다루고 있어 실용적인 구성이 인상 깊었다.

첫 번째 파트에서는 React에서 흔히 마주하는 안티패턴과 주요 개념들을 정리한다. React의 필수 개념 이해를 돕는 챕터는 상태 관리나 자주 사용되는 훅을 다루는데, 이미 익숙한 개발자라면 빠르게 훑고 넘어갈 수 있는 정도지만 초심자에게는 먼저 개념을 정리하는 데 도움이 될 것 같았다. 개인적으로는 안티패턴을 소개하는 첫 번째 챕터의 내용을 읽으며 사내 프로젝트에 적용할 수 있는 부분이 있는지 점검해 보기도 했고, 그 과정에서 평소 무심코 지나쳤던 구조의 문제를 되짚어보게 되었다.

주니어 개발자 입장에서 프로젝트를 처음 작업하려다 보면 구조에 대해 고민하게 되는데, 웹을 통해 접하는 글이나 영상은 마치 넷플릭스에서 컨텐츠를 고르는 것처럼 ‘뭘 좋아할지 몰라서 다 준비했어.’ 같은 느낌이라 다소 혼란스러운 경우가 많았다. 구조와 관련된 이 챕터에서는 기능 기반 구조, 컴포넌트 기반, 아토믹 디자인 구조, MVVM 구조 이렇게 네 가지만 다룬다. MVVM을 제외하고는 한 번씩은 경험해 봤던 구조였는데, 특히 최근에 잘못된 아토믹 디자인 구조가 적용된 프로젝트로 지지고 볶는 와중이라 더욱이 와닿는 챕터였다. 어쨌든 한 구조에 매몰될 필요도 없고 적당히 두 개의 구조를 섞어서 사용할 수도 있겠지만, 결국 어떤 구조든 프로젝트의 성격과 팀의 상황에 맞게 선택해야 하며 그 기준을 외부에서 찾기보다는 스스로의 판단을 기준으로 삼아야 한다고 생각한다. 완벽한 계층 구조를 가지지 못하더라도 일단 스스로 유지보수하는 데에 용이한 부분이 있다면 어느 정도는 좋은 선택이지 않을까 하는 생각을 갖고 있는데, 이 챕터가 그런 고민에 충분한 도움이 된다.

그다음으로는 컴포넌트 설계를 위해 단일 책임 원칙, 중복 배제 원칙, 합성 활용하기, 컴포넌트 설계 원칙의 결합을 다룬다. 사실 소프트웨어 공학의 알려진 개념들은 연차가 쌓일수록 직접 경험을 통해 체득했던 부분이 있는 것 같다. 취업을 준비하던 시기에 단일 책임 원칙을 접했을 땐 이래야 유지보수가 쉽겠다 싶은 마음으로 글을 읽어왔었는데, 막상 프로젝트를 하다 보니 주요한 원칙을 종종 놓치기도 했다. 이후에 그 원칙을 지키지 못했던 기술 부채 같은 느낌으로 비로소 유지보수의 늪에 빠져서야 그 의미가 와닿았던 경험이 있다.

두 번째 파트는 단위 테스트, 통합 테스트, E2E 테스트 등을 포함한 테스팅 기법을 다룬다. 테스트에 대한 전반적인 개념 정리는 물론, Jest와 Cypress 등을 활용한 실습 중심의 접근이 매우 유용했다. 아직 테스트 주도 개발(TDD)을 실무에서 적용해 본 경험은 없지만, 이 책에서는 TDD의 핵심 단계인 레드-그린-리팩터는 물론 ATDD, BDD까지 폭넓게 다뤄줘 개념을 잡는 데 도움이 되었다. 예제 프로젝트를 통해 TDD의 상향식/하향식 접근 방식을 비교해 볼 수 있는 구성으로 이해하는 데에 용이했다.

세 번째 파트에서는 비즈니스 로직과 디자인 패턴과 관련된 실제 업무 중 마주치는 다양한 상황에 대한 해법을 제시한다. Context API를 통한 데이터 관리와 더불어 단일 책임 원칙, 의존관계 역전 원칙 같은 익숙한 설계 원칙들도 다시 한번 실무 중심으로 조명되며, 단순히 이론적으로만 알았던 원칙들이 실제 상황에서 얼마나 중요한지 체감하는 데에 도움이 된다. 특히 합성 패턴을 다룬 10장이 인상적이었다. 고차 컴포넌트, 헤드리스 컴포넌트 등의 패턴은 복잡한 기능을 분리하고 재사용하는 데 중요한 역할을 하기 때문에 앞으로 더 많은 실무에 활용하고 싶은 부분이다. 실무와 가장 밀접한 부분이면서도 과하게 설명만 늘여놓지 않아 다시 읽는다면 이 범위 내의 내용을 실무에 적용해 보고 싶다는 생각이 들었다.

마지막 파트는 실무 프로젝트 구현에 가까운 흐름으로 이어간다. 특히 OpenWeatherMap API를 활용한 날씨 애플리케이션 구축 챕터는 E2E 테스트를 실제로 경험해 보고 싶은 개발자에게 훌륭한 실습 자료가 될 것 같았다. 단위 테스트가 어느 정도 익숙해졌거나 E2E를 실제로 구현해 보고 테스트해 보고 싶은 사람에게는 특히나 전반적으로 도움이 될 파트 같았다.

마지막 챕터에서는 다시 안티패턴을 되짚고, 앞서 나온 설계 원칙과 기법들을 종합적으로 정리한다. 실무에서 자신이 저지르고 있는 실수를 발견하거나 개선 포인트를 도출해 볼 수 있는 챕터라 반복해서 찾아보기에 적합하다. 마지막으로 앞서 언급했던 내용과 더불어 React의 안티패턴을 다시 돌아보고 그런 패턴을 피하기 위해서, 혹은 수정하기 위해서 어떤 액션을 하면 좋을지에 대한 내용이 담겨 있다. 앞서의 내용을 복습하는 일종의 요약 같은 챕터인데 본인에게 해당하는 안티 패턴이 있다면 언급된 솔루션에 맞게 해당 챕터로 다시 건너뛰어 내용을 훑어보는 방식이 적절해 보였다.

이 책은 단순히 React의 기능을 소개하는 데 그치지 않고, 실무에서 고민하게 되는 구조, 테스트, 패턴, 유지보수의 복잡성을 어떻게 풀어갈 수 있는지를 단계적으로 설명한다. 한 번에 모든 내용을 실전에 적용하기는 어렵겠지만, 한 챕터씩 자신이 작업 중인 프로젝트와 비교하며 천천히 소화해 본다면 분명 도움이 될 거라 생각한다. 개인적으로는 ‘지금 내가 하는 선택이 유지보수 측면에서 도움이 되는가?’를 스스로 묻게 되는 책이었다. React를 어느 정도 사용해 본 개발자라면 실무에서 한 걸음 더 나아가고 싶은 시점에 이 책을 천천히 곱씹어보기를 추천한다.

profile
평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.

0개의 댓글