패턴으로 익히고 설계로 완성하는 리액트

TDD와 리팩터링으로 만드는 효율적이고 유지보수 가능한 클린 코드

준타오 추 저자(글) · 정재명 번역

한빛미디어 · 2025년 02월 14일

책 소개

프런트엔드 개발의 복잡성을 해결하고
유지보수하기 쉬운 코드를 작성하는 핵심 노하우

리액트를 활용한 대규모 애플리케이션 개발은 비동기 처리, 상태 관리, 성능 최적화 등 다양한 도전을 동반합니다. 이 책은 리액트 개발에서 자주 발생하는 안티패턴을 정의하고, 이를 검증된 설계 원칙으로 해결하는 방법을 제시합니다. 실용적인 예제와 단계별 접근으로 코드 구조를 개선하고 TDD, 설계 원칙을 통해 신뢰할 수 있는 애플리케이션을 만드는 법을 배웁니다. 또한, 날씨 애플리케이션 프로젝트를 통해 배운 내용을 실전에 직접 적용해 볼 수 있습니다. 이 책은 리액트 개발자에게 견고하고 확장 가능한 애플리케이션을 만드는 확실한 길잡이가 될 것입니다.

작가정보

저자(글) 준타오 추

출간작으로『패턴으로 익히고 설계로 완성하는 리액트』등이 있다.

번역 정재명

역서로『패턴으로 익히고 설계로 완성하는 리액트』등이 있다.

목차

• [PART 1 리액트 기본 개념]
  
  CHAPTER 1 리액트 안티패턴 소개
  _1.1 UI 구축의 어려움에 대한 이해
  _1.2 상태 관리의 이해
  _1.3 예외 흐름 탐색하기
  _1.4 리액트의 일반적인 안티패턴 살펴보기
  
  CHAPTER 2 리액트 필수 개념 이해
  _2.1 리액트 정적 컴포넌트
  _2.2 prop이 있는 컴포넌트 만들기
  _2.3 UI를 여러 컴포넌트로 나누기
  _2.4 리액트 내부 상태 관리
  _2.5 렌더링 과정 이해하기
  _2.6 많이 사용되는 리액트 훅
  
  CHAPTER 3 리액트 애플리케이션 구조
  _3.1 구조화되지 않은 프로젝트의 문제점
  _3.2 프런트엔드 애플리케이션의 복잡함에 대한 이해
  _3.3 일반적인 리액트 애플리케이션 구조
  _3.4 프로젝트 구조를 체계적으로 유지하기
  
  CHAPTER 4 리액트 컴포넌트 설계하기
  _4.1 단일 책임 원칙
  _4.2 중복 배제 원칙
  _4.3 합성 활용하기
  _4.4 컴포넌트 설계 원칙의 결합
  
  [PART 2 테스팅 기법]
  
  CHAPTER 5 리액트 테스팅
  _5.1 테스트가 필요한 이유
  _5.2 여러 종류의 테스트 알아보기
  _5.3 Jest로 하는 개별 단위 테스팅
  _5.4 통합 테스트
  _5.5 Cypress를 이용한 E2E 테스트
  
  CHAPTER 6 일반적인 리팩터링 기법 살펴보기
  _6.1 리팩터링 이해하기
  _6.2 리팩터링 전 테스트 추가하기
  _6.3 변수 추출하기
  _6.4 반복문을 파이프라인으로 바꾸기
  _6.5 함수 추출하기
  _6.6 매개변수 객체 도입
  _6.7 조건문 분해하기
  _6.8 함수 이동하기
  
  CHAPTER 7 리액트에서의 테스트 주도 개발
  _7.1 TDD 이해하기
  _7.2 태스킹 이해하기
  _7.3 온라인 피자 가게 애플리케이션
  _7.4 애플리케이션 요구사항 세분화
  _7.5 애플리케이션 헤드라인 구현
  _7.6 메뉴 목록 구현
  _7.7 장바구니 만들기
  _7.8 장바구니에 아이템 담기
  _7.9 애플리케이션 리팩터링
  
  [PART 3 비즈니스 로직과 디자인 패턴 알아보기]
  
  CHAPTER 8 리액트 데이터 관리
  _8.1 비즈니스 로직 누수 현상
  _8.2 ACL(오류 방지 계층)
  _8.3 Prop Drilling 문제 살펴보기
  _8.4 Context API를 통한 Prop Drilling 문제 해결
  
  CHAPTER 9 리액트 설계 원칙 적용
  _9.1 단일 책임 원칙
  _9.2 의존관계 역전 원칙
  _9.3 명령과 조회 책임 분리 원칙
  
  CHAPTER 10 합성 패턴
  _10.1 고차 컴포넌트를 통한 합성의 이해
  _10.2 리액트 훅
  _10.3 드롭다운 목록 컴포넌트 만들기
  _10.4 헤드리스 컴포넌트 패턴
  
  [PART 4 실무에서의 구현]
  
  CHAPTER 11 리액트 계층 구조 애플리케이션
  _11.1 리액트 애플리케이션의 진화
  _11.2 코드 오븐 애플리케이션 개선하기
  _11.3 장바구니 컴포넌트 구현
  _11.4 계층 구조 알아보기
  
  CHAPTER 12 E2E 프로젝트 구현하기
  _12.1 날씨 애플리케이션에 필요한 요구사항 확인
  _12.2 초기 승인 테스트 작성
  _12.3 도시 검색 기능 구현
  _12.4 ACL 구현
  _12.5 즐겨찾기 추가 기능 구현
  _12.6 애플리케이션 재실행 시 이전 날씨 데이터 불러오기
  
  CHAPTER 13 리액트 안티패턴 원칙 돌아보기
  _13.1 일반적인 안티패턴 돌아보기
  _13.2 디자인 패턴 훑어보기
  _13.3 기본 설계 원칙 복습하기
  _13.4 기법과 실무 예제 정리

추천사

• 이장훈 (DevOps 엔지니어)

  리액트로 개발하는 사람에게 추천할 만한 책입니다. 기초적인 내용을 다루기보다는, 실제 개발 과정에서 신경 써야 할 부분과 중요한 개념들을 다루고 있어서, 현업에서 리액트를 사용하고 있는 개발자들이 자신의 코드를 점검하고 개선하는 데 도움이 될 것입니다.
  특히 컴포넌트 설계, TDD, 리팩터링 같은 주제와 함께 날씨 API를 활용한 예제가 포함되어 있어서 애플리케이션 설계 구조를 잡는 데 많은 참고가 되었습니다. 리액트로 작업 중인 저에게도 유익한 책이었습니다.

• 김이현 (프런트엔드 개발자)

  신입 프런트엔드 개발자인 저에게는 조금 어렵게 느껴졌지만, 실무에 꼭 필요한 내용을 담고 있어 매우 유익했습니다. 프로젝트가 커질수록 구조와 관리의 중요성을 깨닫게 되었고, 이 책을 통해 패턴이 안정적인 프로젝트 유지의 핵심임을 알게 되었습니다.
  단순한 이론이 아니라 실질적인 예제와 접근법으로 실무에 필요한 내용을 체계적으로 배울 수 있어, 리액트를 공부하거나 실무를 준비 중인 분들께 추천드립니다.

• 원종필 (프런트엔드 개발자)

  리액트의 기본 규칙만 지켜도 프로젝트를 완성할 수 있지만, 시간이 지날수록 더 나은 코드 작성과 구조 개선에 대한 고민이 생깁니다. 이 책은 바로 그 고민에 대해 명확한 답을 제시합니다. 해야 할 것과 하지 말아야 할 것을 깔끔하게 구분하며, 복잡하지 않으면서도 실질적인 가이드를 제공합니다. 이 책을 통해 리액트 코드 작성과 컴포넌트 구조에 대한 개념이 머릿속에 정리되는 느낌을 받을 수 있을 것입니다. 리액트 프로젝트와 구조에 대해 고민 중이라면 이 책이 큰 도움이 될 것입니다.

• 이웅모 (퓨처포인트 개발자)

  이 책을 한 줄로 정리하자면 '리액트와 소프트웨어 설계 원칙의 조화로운 만남'이라고 표현할 수 있습니다.
  이 책은 리액트의 기본 사용법을 넘어 소프트웨어 설계 원칙을 깊이 있게 탐구하며, 이를 리액트 개발에 적용하는 방법까지 상세히 다룹니다. 유지보수성과 확장성이 뛰어난 애플리케이션 구축 과정을 체계적으로 안내하고, 설계 원칙 기반의 리팩터링 기법과 TDD 방법론을 실용적으로 소개합니다.
  리액트 개발에서 간과되기 쉬운 설계 원칙의 중요성을 강조하고, 테스트를 통한 신뢰성 높은 코드 작성법을 설명합니다. 이 책은 리액트 개발자들의 코드 품질 향상을 위한 필수적인 길잡이가 될 것입니다.

• 김병규 (아이스크림에듀 AI 연구소 개발자)

  이 책은 리액트의 기본기를 익힌 개발자들이 한 단계 더 성장할 수 있도록 돕습니다. 소프트웨어 설계 방법을 리액트에 적용하여 견고한 애플리케이션 구조를 만드는 방법을 상세히 다룹니다. TDD, 테스팅 기법, 객체지향 설계 원칙 등 이 책에서 얻을 수 있는 지식은 리액트를 넘어 다양한 프로그래밍 영역에서 활용 가능합니다. 저자는 실제 개발 과정에서 마주칠 수 있는 설계 문제와 이를 개선하는 리팩터링 과정을 통해 효과적으로 설계의 중요성을 전달합니다. 리액트 프로젝트의 구조와 설계에 대해 고민하는 개발자들에게 이 책은 실무에 적용할 수 있는 귀중한 인사이트를 제공할 것입니다.

• 이양구 (프런트엔드 개발자)

  리액트 입문과 초급을 넘어서고 싶은 당신에게 이 책을 추천합니다. 디자인 패턴, TDD, 리팩터링 등 어렵게만 느껴졌던 개념들을 왜 알아야 하는지, 왜 많은 개발자들이 사용하는지 쉽게 설명해줍니다. 안티패턴 코드가 개선되는 과정을 통해 패턴과 테스트의 중요성을 자연스럽게 이해할 수 있습니다. 또한, 선배 개발자나 오픈 소스의 코드 구조를 이해하는 데 큰 도움이 될 것입니다. 이 책은 더 나은 코드에 대해 고민하기 시작한 당신에게, 그리고 중급 리액트 강의를 준비하는 개발자에게 꼭 필요한 첫 단추가 될 것입니다.

• 김성연 (풀스택 개발자)

  이 책은 리액트의 기본 원리와 자바스크립트에 대한 기초 지식을 갖춘 독자들에게 추천합니다. 리액트 입문자보다는 기본기를 다진 후 더 높은 수준의 개발 역량을 키우고자 하는 개발자들에게 특히 유용할 것입니다. 실무에서 마주치는 다양한 문제들을 효과적으로 해결하고 싶은 분들에게 큰 도움이 될 겁니다. 이 책을 통해 리액트 개발의 심화된 기술과 방법론을 배우며, 더 나은 코드 설계와 문제 해결 능력을 갖출 수 있으리라 확신합니다.

• 박명철 (오토플러스 개발자)

  이 책은 심도 있는 설계 기법과 패턴을 예제 코드를 통해 실습하며 빠르게 이해할 수 있도록 도와줍니다. 내용이 쉽지만은 않지만, 소프트웨어 공학을 한층 더 깊게 공부하는 값진 경험을 제공합니다. 그동안 코딩에만 집중했던 개발자라면 많은 전문 용어를 접하고 배울 수 있는 좋은 기회가 될 것입니다. 특히 많은 개발자들이 어려워하는 테스팅, 리팩터링, TDD에 대해 깊이 있는 설명을 제공하고 있어, 이 부분에 관심 있는 리액트 개발자에게 적극 추천합니다.

• 문주영 (프런트엔드 개발자)

  리액트를 기본적으로 사용할 줄 아는 분이라면, 이 책을 통해 리액트를 더욱 유용하게 활용할 수 있을 것입니다. 기피해야 할 실수와 활용해야 할 패턴을 명확히 제시해, 리액트를 효과적으로 사용할 수 있는 길을 안내합니다. 리액트에 대한 깊은 이해와 실질적인 활용법을 배우고자 하는 모든 분들께 이 책을 자신 있게 추천합니다.

출판사 서평

리액트 프로젝트의 품질을 한 단계 끌어올리는 실무 가이드
이 책은 리액트의 기본 사용법을 넘어, 실무에서 마주치는 설계 문제를 해결하기 위한 가이드를 제공합니다. 컴포넌트 설계, TDD, 리팩터링, 그리고 패턴 기반 설계 원칙을 다루며, 유지보수성과 확장성이 뛰어난 애플리케이션을 구축하는 방법을 배울 수 있습니다. 단순한 이론에 그치지 않고, 실전 예제를 통해 설계와 테스트의 중요성을 자연스럽게 이해하며, 복잡한 문제를 해결할 수 있는 실용적인 방법을 익힐 수 있습니다.
리액트 프로젝트의 구조화, 상태 관리, 계층화된 아키텍처 설계 등 대규모 애플리케이션 개발 전략을 다룹니다. 또한, 안티패턴의 분석과 해결 방법, 명령과 조회 책임 분리(CQRS), 합성 패턴과 같은 고급 설계 기법까지 체계적으로 제시하여 리액트 개발자에게 필요한 실용적인 지식을 제공합니다.
초보 개발자에게는 탄탄한 기초를 제공하고, 경험 많은 개발자에게는 실력을 한 단계 더 발전시킬 기회를 제공하는 이 책은, 모든 리액트 개발자에게 실질적인 도움을 줄 것입니다.

기본정보

ISBN	9791169213417
발행(출시)일자	2025년 02월 14일
쪽수	356쪽
크기	184 * 236 * 16 mm / 782 g
총권수	1권