단순 Hook 활용을 넘어 책임 분리 기반의 React 제품 아키텍처 설계

What Building Pagelyze Taught Me About React Best Practices

Prazin Karki2026년 6월 26일3분intermediate

AI 요약

Context

단일 파일에 데이터 로딩과 비즈니스 로직이 집중되어 확장성이 저하되는 Monolithic Component 구조의 한계 직면. 제품의 기능 확장 시 코드 복잡도 증가와 유지보수 효율 저하를 방지하기 위한 설계 원칙 필요.

단일 책임 원칙(SRP)에 기반하여 AuditSummary, LeadCheckPanel 등 기능별로 Component를 세분화한 구조 설계
UI 상태, Form 상태, Server 상태, Global 상태로 State의 성격을 정의하여 데이터의 소유권과 생명주기를 최적화한 상태 관리
비즈니스 로직을 단순 은닉하는 것이 아닌 의미 있는 동작 단위로 추출하여 Component의 선언적 구조를 강화한 Custom Hook 도입
프레임워크 중심의 폴더 구조를 탈피하여 Audit, Lead-rescue 등 제품의 도메인 기능을 중심으로 한 Feature-based Project Structure 적용
사용자 전환 경로(Conversion Path)를 고려하여 단순 URL 매핑이 아닌 비즈니스 여정을 가이드하는 Routing 전략 수립

실천 포인트

1. Component 생성 시 '이 컴포넌트가 존재해야 하는 단 하나의 명확한 이유'가 있는지 검토

2. State 정의 전 해당 데이터가 Local, Form, Server, Global 중 어디에 속하는지 분류

3. Custom Hook 작성 시 단순 코드 이동이 아닌 비즈니스 의미를 담은 인터페이스를 제공하는지 확인

4. 프로젝트 구조를 기술 스택(hooks, components)이 아닌 제품 기능(domain/feature) 단위로 그룹화

태그