📘 『대규모 리액트 웹앱 개발』 북리뷰 – 리액트, 나랑 이제 진짜로 일하자

🙋🏻‍♀️ 시작하며

리액트를 어느 정도 다룰 줄 안다고 생각했지만, 프로젝트가 커질수록 점점 불안해졌습니다.

“이 구조가 맞는 걸까?” “이 상태, 여기서 관리해도 될까?”

처음엔 고민하지 않아도 됐던 문제들이 하나둘 늘어나면서, 리액트를 ‘잘 쓰고 있는 게 맞는지’ 스스로에게 물어보게 되었어요.

 

그런 고민을 하던 중 『대규모 리액트 웹 앱 개발』이라는 책을 알게 되었고,

읽는 내내 “내가 지금까지 왜 이렇게 힘들게 개발하고 있었을까” 하는 마음이 들었습니다.

오늘은 그 깨달음과 배움을 여러분과 나누고 싶어요.

 

“이게 진짜 리액트 개발자가 맞나…?”

 

그럴 때 내 눈앞에 나타난 책이 바로 『대규모 리액트 웹앱 개발』이다.

표지부터 뭔가 믿음직한 이 책은, 단순한 리액트 사용법이나 기술적 설명이 아닌 “리액트를 진짜 잘 쓰는 방법”을 알려준다.

읽고 나서 든 생각은?

“아 이건 진짜 실무자 필독서다.”

---

📦 이 책은 뭐가 다를까?

이 책은 단순히 리액트 문법이나 컴포넌트 작성법을 알려주는 입문서가 아닙니다.

대규모 웹 애플리케이션을 어떻게 설계하고 유지보수할 것인가에 대해 이야기하는,

실무 경험이 풍부한 개발자의 인사이트가 담긴 “설계 중심의 리액트 실전서”에 가깝습니다.

“코드 잘 짜는 법”이 아니라 “시스템을 설계하는 법”을 알려주는 책

 

다루는 주제도 단순히 프론트엔드 개발에 국한되지 않고 꽤 넓은 범위를 포괄해요:

• 대규모 웹앱에서 복잡성 관리하는 방법
• 디자인 시스템을 어떻게 도입하고 유지할 것인가
• 상태 관리, 데이터 페칭, 국제화(i18n), 코드 아키텍처 설계
• 개인화, A/B 테스트, 대규모 리팩토링, 마이그레이션 전략
• 그리고 타입스크립트, 테스트, 성능 최적화

그동안 “정답을 몰라서” 그냥 지나쳐온 부분들에 대해 명쾌하게 설명해주어서, 마치 선배 개발자에게 1:1로 멘토링을 받는 기분이었습니다.

---

🧱 챕터별 인상 깊은 포인트 모음.zip

1️⃣ 소프트웨어 복잡성 관리하기

🔍 복잡성은 피할 수 없다, 다만 통제할 수 있다

 

프로젝트가 커지면 자연스럽게 복잡해지는 것은 당연합니다.

이 책에서는 이러한 복잡성을 무조건 줄이려고 애쓰기보다는, 예측 가능하고 제어 가능한 방식으로 구조화할 것을 강조합니다.

 

특히 인상 깊었던 부분은 “복잡성을 제거하려 하지 말고, 관리 가능한 상태로 만들어라”는 메시지였습니다.
실제로 코드를 읽는 사람 입장에서 “이 기능이 왜 여기 있고, 어떤 역할을 하는지”를 예측할 수 있어야 한다는 점이 인상 깊었어요.

 

예를 들어, Side Effect를 최소화하는 설계, 명확한 의존성 관리, 컴포넌트의 역할 분리 등을 통해 복잡성을 다루는 전략이 소개되었는데,

이를 보고 나니 이전에 작업했던 프로젝트에서 왜 리팩토링이 힘들었는지 납득이 되더라고요

 

📌 저는 이 내용을 바탕으로, 새로운 사이드 프로젝트에서도

처음부터 폴더 구조와 관심사를 기준으로 컴포넌트를 나누는 연습을 시작해봤습니다.

2️⃣ 모듈성

🔍  디자인 시스템은 개발자의 도구이기도 하다

 

디자인 시스템은 디자이너들의 영역이라고 생각했던 적이 있었어요,

그런데 책에서는 디자인 시스템을 프론트엔드 개발자가 일관되고 확장 가능한 UI를 구현하기 위한 도구라고 정의해요.

즉, 개발자가 적극적으로 관여하고 만들어가는 것이 바로 디자인 시스템이라는 거죠.

 

특히, 디자인 토큰, 컴포넌트 라이브러리 분리 전략, 접근성을 고려한 설계 등의 실제 사례들이 제시되어 있습니다
“이건 진짜 써먹을 수 있는 내용이다” 싶었어요.

 

📌 저는 개인 프로젝트에서도 Styled-components와 Storybook을 이용해

디자인 시스템 기초를 구성해보기 시작했어요. 아직은 미숙하지만,

공통 버튼/입력창 등 UI 요소의 통일성 유지가 개발 속도에 큰 영향을 준다는 걸 체감 중입니다.

3️⃣ 상태 관리

🔍 상태 관리는 단순히 Redux vs Context의 문제가 아니다

 

많은 상태 관리 도구들이 있지만,

“상태를 어디서 어떻게 관리할지”에 대한 철학적인 접근이 정말 좋았습니다.

 

상태 관리에 대한 고민은 리액트를 어느 정도 써본 개발자라면 누구나 하는 주제죠.

“이 상태, 전역으로 올릴까?”, “로컬에서 처리할까?”, “서버 상태로 두는 게 나을까?”

그런 고민에 대해 이 책은 “선택의 기준”을 명확하게 제시해줍니다.

 

예를 들어, UI 상태, 비즈니스 상태, 서버에서 오는 데이터를 구분해서 관리하는 방식은

불필요한 리렌더링과 로직 중복을 줄이는 데에 큰 도움이 되었습니다.

상태를 로컬에 둘지, 전역에 둘지, 서버 상태와 클라이언트 상태를 어떻게 나눌지 등

정답을 제시하기보단 상황에 따른 판단 기준을 알려주어서 더욱 유익했어요.

 

 

📌 저는 이 파트를 읽고, 전역으로 다 몰아넣었던 상태들을 다시 점검하게 되었어요.

특히 React Query를 쓸 때는 클라이언트 상태와 서버 상태를 혼동하면 디버깅이 어려웠는데,

이제는 설계 단계부터 역할을 구분하려 노력하고 있어요.

 

https://github.com/DoITFronts/Frontend/wiki/05.-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-&-API-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%A0%84%EB%9E%B5

05. 상태 관리 & API 최적화 전략

실제 사이드 프로젝트에 적용한 예시 정리 위키입니다!

4️⃣ 개인화, A/B 테스팅, 마이그레이션 전략

책 후반부에 소개되는 이 파트는 “지금 당장 필요하진 않지만, 곧 부딪히게 될 문제”들에 대한 선제적인 가이드였어요.

 

후반부 챕터는 실무자들에게 정말 귀한 내용이 담겨 있습니다.

사용자별로 UI를 다르게 보여주거나, 기능을 점진적으로 적용하는 A/B 테스트,

또는 기존 시스템을 중단 없이 새로운 구조로 마이그레이션하는 전략들이 바로 그것이죠.

특히 저는 기능 플래그(Feature Flag)를 도입하는 챕터가 인상 깊었어요.

 

단순히 if (user.isNew) 조건을 쓰는 게 아니라, 어떻게 이를 서비스 전체적으로 설계하고 유지할 것인가에 대한

아키텍처 관점의 설명이 담겨 있어서 시야가 확 넓어졌습니다.

 

📌 아직 직접 적용해볼 기회는 없지만,

프로덕트를 운영하는 입장에서 ‘실험 가능한 코드베이스’를 어떻게 만들 것인가에 대한

전략적 사고를 연습하게 된 계기가 되었어요.

---

📌 이 책을 읽고 달라진 점

• 무작정 기능을 만들기보다 구조를 먼저 고민하게 되었습니다.
• 사이드 프로젝트의 디렉토리 구조를 기능 기반으로 리팩토링했어요.
• 상태 관리를 설계할 때 “데이터의 출처와 소비 위치”를 함께 고려하게 되었어요.
• 디자인 시스템을 코드 레벨에서 구축하고 싶은 욕심이 생겼습니다.

---

😅 다만 이런 분들께는 조금 어려울 수 있어요

• 리액트 입문자분들에겐 다소 어려울 수 있습니다.

       → 문법 설명보다는 설계와 철학 중심의 내용이기 때문이에요.

 

• 챕터별로 광범위한 내용을 담고 있다 보니, 깊이보다는 넓이에 집중한 편입니다.

       → 따라서 각 주제에 대한 실습은 별도로 해보는 걸 추천드려요.

---

🎯 이런 분들께 추천드려요

대상	이유
중급 이상의 리액트 개발자	설계, 유지보수, 아키텍처에 관심 있는 분
사이드 프로젝트를 체계적으로 정리하고 싶은 분	디렉토리 구조, 상태 관리 전략에 대한 통찰 가능
실무에서 혼자 판단하고 결정해야 할 일이 많은 분	근거 있는 설계 기준을 얻을 수 있음

 

---

🧵 마치며

『대규모 리액트 웹 앱 개발』은 저에게 “리액트를 잘 쓴다”는 것의 의미를 되묻게 해준 책이었습니다.

지금까지는 ‘작동하면 됐지’라는 마음으로 개발을 해왔다면,

이 책을 통해 ‘지속 가능한 개발’, 그리고 ‘같이 일하기 좋은 코드’에 대해 다시 생각하게 되었어요.

 

실무에서 방향성을 고민하고 계신 분들께, 진심으로 추천드립니다.

읽는 내내 무릎을 탁 치게 되는 문장이 가득했어요.