CH1 리액트 안티패턴 정리

서론 👀

안티패턴(anti-pattern)은 명백한 버그가 아님에도 처음엔 문제없이 동작합니다.
하지만 기능이 늘수록, 이러한 코드 구조는 점차 복잡성·유지보수성의 함정을 드러냅니다.

💡 “코드의 ‘기능’이란 어떤 단위를 말할까?
우리가 진짜 해결해야 할 문제는 ‘불완전한 코드’ 자체가 아니라, 확장 · 변경 과정에서 벌어지는 숨은 비용입니다.”

이 책(『패턴으로 익히고 설계로 완성하는 리액트』)은 앞으로 오류로 이어지기 쉬운 잘못된 예제를 살펴보고,
검증된 패턴과 원칙으로 이를 자연스럽게 개선하는 과정을 보여줍니다.

이번 장에서는 복잡한 상태 관리와 비동기 작업이 가독성에 미치는 영향,
그리고 고급 리액트 앱에서 자주 발생하는 문제군을 한눈에 조망합니다.

• UI 구축의 어려움
• 상태 관리의 복잡성
• 예외 흐름
• 대표적인 리액트 안티패턴

1.1 UI 구축의 어려움

HTML 만으로는 현대적·동적인 웹 UI를 구현하기 어렵습니다.

• 웹 언어의 한계
  단순 문서가 아닌 티켓 예매, 프로젝트 관리 도구, 이미지 갤러리 등 복잡한 UI는
  HTML · CSS로는 본질적으로 부족합니다.
• 규모가 커질수록 커스텀 요소 필요
  아코디언, 데이터 그리드, 드롭다운 등은 브라우저 기본 요소가 아니기에
  개발자가 추가 마크업·스타일·로직을 꾸준히 작성해야 합니다.
• 시각적 툴 부재
  Figma처럼 드래그-앤-드롭으로 UI를 배치할 수 없으므로,
  색상·패딩·폰트를 미세 조정하고, 아이콘·레이블을 직접 조립해야 합니다.

📌 UI 개발 언어의 불일치는 ‘안티패턴’ 그 자체라기보다,
패턴 / 컴포넌트 추상화가 왜 필요한지 보여주는 근본 배경입니다.

1.2 상태 관리의 이해

프론트엔드 상태는 원격(서버) · 로컬 · 파생 상태가 뒤섞이며 빠르게 복잡해집니다.

원격 상태의 복잡성

• 비동기: 여러 API를 동기화할 때 타이밍 이슈 발생
• 오류 처리: 네트워크 실패·서버 오류까지 고려해야 함
• 로딩: 데이터 도착 전 UI 플레이스홀더 필요
• 일관성: 다중 사용자·실시간 앱일수록 서버와 동기 유지가 어려움
• 캐싱: 성능 ↔ 데이터 무효화 전략 간 트레이드오프
• 낙관적 UI: 실패 시 롤백 로직 필수

결과적으로 정적 데이터 렌더링보다 훨씬 많은 코드가 필요하며,
로컬 상태까지 더해지면 코드베이스는 급격히 방대해집니다.

1.3 예외 흐름 탐색하기

1.3.1 타사 / 타팀 컴포넌트 오류

• 외부 컴포넌트 오류 → UI 중단·예상치 못한 동작
• 해결: 조건부 렌더링, Error Boundary, 폴백 UI 등을 추가

1.3.2 예측 불가한 사용자 행동

• Edge case를 대비한 입력 검증·가드 로직 필수
• 그만큼 코드 복잡성 상승

대규모 React 앱은 공식 가이드만으론 충분치 않습니다.
명확한 설계 원칙이 없으면 안티패턴이 누적되기 쉽습니다.

1.4 리액트의 일반적인 안티패턴

안티패턴은 겉으로는 “동작하는 솔루션”처럼 보이지만,
시간이 지나면 복잡성·비효율을 키우는 숨은 부채입니다.

1.4.1 Prop Drilling

• 데이터가 중간 컴포넌트를 계속 통과 → 가독성·디버깅 악화
• Context API나 상태 관리 라이브러리로 해결

1.4.2 컴포넌트 내부 데이터 변환

• API 응답을 컴포넌트 안에서 직접 가공
• 👉 재사용성·테스트성 하락 → 유틸 함수·Adapter 패턴으로 분리

1.4.3 뷰 영역의 복잡한 로직

• 프레젠테이션 컴포넌트가 비즈니스 로직까지 담당
• 관심사 분리를 깨뜨려 테스트·재사용·유지보수 난이도 상승
• 👉 계층화 아키텍처, Custom Hook/HOC로 역할 분리

1.4.4 테스트 부족

• 핵심 기능(예: 쇼핑 카트)조차 테스트 미비 시
  가격 오류·보안 취약점·UI 깨짐 위험
• TDD / 테스트 자동화로 신뢰 확보

1.4.5 중복 코드

• 동일 로직이 곳곳에 복사 → DRY 원칙 위반
• 👉 공통 로직을 유틸 함수·HOC·커스텀 훅으로 중앙화

1.4.6 거대 컴포넌트

• 기능이 계속 추가되어 멀티-레벨 책임을 지게 됨
• SRP(단일 책임 원칙) 위배 → 분할·리팩터링 필요

1.4.7 안티패턴 제거 전략

• 식별(Identify) → 추출(Extract) → 치환(Replace)
  1. 코드 냄새를 찾고
  2. 패턴·모듈·추상화로 분리하며
  3. 테스트로 회귀 버그를 방지한다.

마무리

React 앱은 풍부한 UI 경험과 복잡한 상태 관리를 동시에 요구합니다.
따라서 패턴에 기반한 설계 없이는 안티패턴이 필연적으로 스며듭니다.
이번 장을 통해 “어디서부터 설계가 어긋나기 시작하는지”를 파악하고,
다음 장부터는 구체적 리팩터링 방법을 살펴보겠습니다.